vite打包只生成了一個css和js文件問題的解決方法
更新時間：2024年05月27日 11:19:51 作者：范特西是只貓
今天整了一個項目,試了下打包,發(fā)下打包后只生成了一個css文件,和一個js文件,這樣肯定是不行的,因為這樣這個文件的包大小很大,第一次訪問會導致白屏問題,所以本文給大家介紹了vite打包只生成了一個css和js文件問題的解決方法,需要的朋友可以參考下
1. 打包遇到的問題
今天整了一個項目，試了下打包，發(fā)下打包后只生成了一個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. 調(diào)整后再次打包ok
已經(jīng)根據(jù)頁面分js和css了
以上就是vite打包只生成了一個css和js文件問題的解決方法的詳細內(nèi)容，更多關(guān)于vite打包只生成個css和js文件的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
vue是法語中視圖的意思，Vue.js是一個輕巧、高性能、可組件化的MVVM庫，同時擁有非常容易上手的API。下面這篇文章主要給大家總結(jié)了Vue在開發(fā)過程中遇到的疑惑知識點,有需要的朋友可以參考借鑒，下面來一起看看吧。2017-01-01
Vue echarts 實現(xiàn)離線中國地圖的示例代碼(細化到省份)
這篇文章主要介紹了Vue echarts 實現(xiàn)離線中國地圖,細化到省份,本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-09-09
vue內(nèi)置動態(tài)組件component使用示例小結(jié)
component是vue內(nèi)置組件,主要作用為動態(tài)渲染組件,這篇文章主要介紹了vue內(nèi)置動態(tài)組件component使用示例小結(jié),需要的朋友可以參考下2024-03-03
vue3使用defineModel實現(xiàn)父子組件雙向綁定
這篇文章主要個給大家介紹了在vue3中使用defineModel進行父子組件中的雙向綁定,文中通過代碼示例給大家介紹的非常詳細,對大家的學習或工作有一定的幫助,需要的朋友可以參考下2024-01-01
這篇文章主要介紹了使用Vue.js中的過濾器實現(xiàn)冪方求值的方法，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-08-08
VUE3 defineProps是Vue3組件通信的核心工具之一,通過簡潔的語法實現(xiàn)了類型安全響應式綁定與靈活的校驗配置,下面就來具體介紹一下,感興趣的可以了解一下2025-12-12
解決vue中使用Axios調(diào)用接口時出現(xiàn)的ie數(shù)據(jù)處理問題
今天小編就為大家分享一篇解決vue中使用Axios調(diào)用接口時出現(xiàn)的ie數(shù)據(jù)處理問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了vue如何遍歷data所有變量并賦值，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue3監(jiān)聽store中數(shù)據(jù)變化的三種方式
這篇文章給大家介紹了Vue3監(jiān)聽store中數(shù)據(jù)變化的三種方法,使用watch和storeToRefs函數(shù),使用計算屬性computed和使用watchEffect函數(shù)這三種方法,文中通過代碼講解非常詳細,需要的朋友可以參考下2024-01-01
Vue實現(xiàn)英文字母大小寫在線轉(zhuǎn)換功能
在Web開發(fā)中,字符串處理是常見的需求之一,特別是在國際化應用中,對于文本的格式化處理尤為重要,本文將介紹如何使用Vue.js來構(gòu)建一個簡單的在線英文字母大小寫轉(zhuǎn)換工具,需要的朋友可以參考下2024-09-09