当前位置: 首页 > news >正文

解决vite打包只生成了一个css和js文件问题

文章目录

  • 1. 打包遇到的问题
  • 2. 问题原因及修改
  • 3. 调整后再次打包🆗

1. 打包遇到的问题

今天整了一个项目,试了下打包,发下打包后只生成了一个css文件,和一个js文件
这样肯定是不行的,因为这样这个文件的包大小很大,第一次访问会导致白屏问题

问题:vite打包后,只生成了一个css和js文件问题

在这里插入图片描述

2. 问题原因及修改

原因是因为这种写法是路由懒加载(官方解释)

component: () =>  import('../views/login/index.vue');

我看了我的页面路由代码,果然是这样引入的

import Layout from "@/layout/index.vue";
import Login from "@/views/login/index.vue";const routes: Array<RouteRecordRaw> = [{path: "/",name: "root",component: Layout ,redirect: { name: "home" },children: [{path: "login",name: "login",component: Login,meta: {title: "登录"}},]}
]

改成 import 方式就行了

const routes: Array<RouteRecordRaw> = [{path: "/",name: "root",component: () => import('@/layout/index.vue'),redirect: { name: "home" },children: [{path: "login",name: "login",component: () => import('@/views/login/index.vue'),meta: {title: "登录"}},]}
]

3. 调整后再次打包🆗

已经根据页面分js和css了

在这里插入图片描述

http://www.lryc.cn/news/354429.html

相关文章:

  • 数据访问层设计_4.灵活运用XML Schema
  • 【Linux安全】Firewalld防火墙基础
  • 先进制造aps专题八 基于ai大模型的ai超级应用,ai生管
  • Textual for Mac:轻量级IRC客户端
  • Facebook:连接世界,畅游社交之旅
  • 部署PIM-SM
  • 一分钟揭秘面试官真实意图,稳拿offer的面试秘诀!
  • 【源码】2024心悦搜剧源码百万级网盘资源
  • 燃数科技前端25-40K*14薪一面超简单,下周二面啦
  • 读人工智能时代与人类未来笔记14_管控人工智能
  • 高效并发编程:Java阻塞队列深度解析与最佳实践
  • 会话机制:Session
  • MySQL中, 自增主键和UUID作为主键有什么区别?
  • 机器人与AI:结合应用与未来展望
  • PyTorch学习笔记:新冠肺炎X光分类
  • 【Python】 XGBoost模型的使用案例及原理解析
  • Java中print,println,printf的功能以及区别
  • vue3+electron+typescript 项目安装、打包、多平台踩坑记录
  • 实际案例分析
  • JAVA实现图书管理系统(初阶)
  • 【Torch学习笔记】
  • LeetCode算法题:42. 接雨水(Java)
  • LINGO:存贮问题
  • 《微服务王国的守护者:Spring Cloud Dubbo的奇幻冒险》
  • (九)npm 使用
  • Thinkphp5内核宠物领养平台H5源码
  • 一、Elasticsearch介绍与部署
  • NL6621 实现获取天气情况
  • SpringCloud配置文件bootrap
  • 经典面试题:进程、线程、协程开销问题,为什么进程切换的开销比线程的大?