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文件的资料请关注脚本之家其它相关文章！
相关文章
本篇文章主要介绍了vue2滚动条加载更多数据实现代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-01-01
Element Plus，由饿了么大前端团队开源出品的一套为开发者、设计师和产品经理准备的基于 Vue 3.0 的组件库，Element Plus是基于Vue3面向设计师和开发者的组件库，提供了配套设计资源，帮助你的网站快速成型2022-12-12
这篇文章主要介绍了vue-cli3搭建项目的详细步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
本文通过实例代码给大家介绍了Vue创建头部组件的相关知识，非常不错，具有一定的参考借鉴价值 ,需要的朋友可以参考下2018-10-10
浅谈angular4.0中路由传递参数、获取参数最nice的写法
下面小编就为大家分享一篇浅谈angular4.0中路由传递参数、获取参数最nice的写法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
Vue中@click.stop和@click.prevent实例详解
当我们使用Vue.js开发前端应用时,经常会在模版中使用@click指令来响应用户的点击事件,这篇文章主要给大家介绍了关于Vue中@click.stop和@click.prevent的相关资料,需要的朋友可以参考下2024-04-04
Vue多页面配置打包性能优化方式(解决加载包太大加载慢问题)
这篇文章主要介绍了Vue多页面配置打包性能优化方式(解决加载包太大加载慢问题)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
本教程讲解的是 Vue-CLI 3.x 脚手架搭建的vue项目, 利用scp2自动化部署到静态文件服务器 Nginx，感兴趣的可以了解一下2021-11-11
今天小编就为大家分享一篇Vue 使用beforeEach实现登录状态检查功能，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-10-10
这篇文章主要介绍了在vant中如何使用dialog弹窗，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
最新评论