vite打包只生成了一个css和js文件问题的解决方法
更新时间：2024年05月27日 11:19:51 作者：范特西是只猫
今天整了一个项目,试了下打包,发下打包后只生成了一个css文件,和一个js文件,这样肯定是不行的,因为这样这个文件的包大小很大,第一次访问会导致白屏问题,所以本文给大家介绍了vite打包只生成了一个css和js文件问题的解决方法,需要的朋友可以参考下
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. 调整后再次打包ok
已经根据页面分js和css了
以上就是vite打包只生成了一个css和js文件问题的解决方法的详细内容，更多关于vite打包只生成个css和js文件的资料请关注脚本之家其它相关文章！
相关文章
vue是法语中视图的意思，Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API。下面这篇文章主要给大家总结了Vue在开发过程中遇到的疑惑知识点,有需要的朋友可以参考借鉴，下面来一起看看吧。2017-01-01
Vue echarts 实现离线中国地图的示例代码(细化到省份)
这篇文章主要介绍了Vue echarts 实现离线中国地图,细化到省份,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-09-09
component是vue内置组件,主要作用为动态渲染组件,这篇文章主要介绍了vue内置动态组件component使用示例小结,需要的朋友可以参考下2024-03-03
这篇文章主要个给大家介绍了在vue3中使用defineModel进行父子组件中的双向绑定,文中通过代码示例给大家介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下2024-01-01
这篇文章主要介绍了使用Vue.js中的过滤器实现幂方求值的方法，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-08-08
VUE3 defineProps是Vue3组件通信的核心工具之一,通过简洁的语法实现了类型安全响应式绑定与灵活的校验配置,下面就来具体介绍一下,感兴趣的可以了解一下2025-12-12
今天小编就为大家分享一篇解决vue中使用Axios调用接口时出现的ie数据处理问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
这篇文章主要介绍了vue如何遍历data所有变量并赋值，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章给大家介绍了Vue3监听store中数据变化的三种方法,使用watch和storeToRefs函数,使用计算属性computed和使用watchEffect函数这三种方法,文中通过代码讲解非常详细,需要的朋友可以参考下2024-01-01
在Web开发中,字符串处理是常见的需求之一,特别是在国际化应用中,对于文本的格式化处理尤为重要,本文将介绍如何使用Vue.js来构建一个简单的在线英文字母大小写转换工具,需要的朋友可以参考下2024-09-09
最新评论