快捷導(dǎo)航

vite打包只生成了一個(gè)css和js文件問題的解決方法

更新時(shí)間：2024年05月27日 11:19:51 作者：范特西是只貓

今天整了一個(gè)項(xiàng)目,試了下打包,發(fā)下打包后只生成了一個(gè)css文件,和一個(gè)js文件,這樣肯定是不行的,因?yàn)檫@樣這個(gè)文件的包大小很大,第一次訪問會(huì)導(dǎo)致白屏問題,所以本文給大家介紹了vite打包只生成了一個(gè)css和js文件問題的解決方法,需要的朋友可以參考下

1. 打包遇到的問題

今天整了一個(gè)項(xiàng)目，試了下打包，發(fā)下打包后只生成了一個(gè)css文件，和一個(gè)js文件，
這樣肯定是不行的，因?yàn)檫@樣這個(gè)文件的包大小很大，第一次訪問會(huì)導(dǎo)致白屏問題

問題：vite打包后，只生成了一個(gè)css和js文件問題

在這里插入圖片描述

2. 問題原因及修改

原因是因?yàn)檫@種寫法是路由懶加載（官方解釋）

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打包只生成了一個(gè)css和js文件問題的解決方法的詳細(xì)內(nèi)容，更多關(guān)于vite打包只生成個(gè)css和js文件的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

相關(guān)文章

詳解hooks在vue3中的使用方法及示例
hooks可以通過特定的函數(shù)將邏輯 "鉤入" 組件中,使得開發(fā)者能夠更靈活地構(gòu)建和管理組件的功能從而提高代碼的可讀性以及可維護(hù)性等,本篇文章將介紹hooks如何在vue3中使用以及它的一些實(shí)際使用例子,讓大家能更好的了解和使用hooks,需要的朋友可以參考下
2023-09-09
Vue?+?Axios?請求接口方法與傳參方式詳解
使用Vue的腳手架搭建的前端項(xiàng)目，通常都使用Axios封裝的接口請求，項(xiàng)目中引入的方式不做多介紹，本文主要介紹接口調(diào)用與不同形式的傳參方法。對Vue?+?Axios?請求接口方法與傳參問題感興趣的朋友一起看看吧
2021-12-12
Vue3項(xiàng)目pc端瀏覽器樣式正常但移動(dòng)端部分樣式失效問題的解決方法
這篇文章主要介紹了Vue3項(xiàng)目pc端瀏覽器樣式正常但移動(dòng)端部分樣式失效問題的解決方法,文中通過圖文講解的非常詳細(xì),具有一定的參考價(jià)值,需要的朋友可以參考下
2024-07-07
elementui上傳文件不允許重名的解決方案
用戶可以多文件上傳 ,在上傳到服務(wù)器之前需要檢查服務(wù)器中有無重名的文件,如果有會(huì)返回重名文件的名稱數(shù)組,這些文件需要一個(gè)一個(gè)的向用戶確認(rèn)是否要覆蓋重傳,這篇文章主要介紹了elementui上傳文件不允許重名,需要的朋友可以參考下
2024-02-02
Vue下拉框雙向聯(lián)動(dòng)效果的示例代碼
這篇文章主要介紹了Vue下拉框雙向聯(lián)動(dòng)效果,實(shí)現(xiàn)聯(lián)動(dòng)，大家都知道在vue的頁面中，想要實(shí)現(xiàn)多個(gè)<el-select 下拉框的值動(dòng)態(tài)改變，必須要調(diào)用@change 函數(shù)，具體操作方法跟隨小編一起學(xué)習(xí)下吧
2022-04-04
Vuejs從數(shù)組中刪除元素的示例代碼
這篇文章主要介紹了Vuejs從數(shù)組中刪除元素的示例代碼,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-02-02
vue實(shí)現(xiàn)商品詳情頁功能之商品選項(xiàng)卡
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)商品詳情頁功能之商品選項(xiàng)卡，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-04-04
淺談vue2 單頁面如何設(shè)置網(wǎng)頁title
這篇文章主要介紹了淺談vue2 單頁面如何設(shè)置網(wǎng)頁title,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-11-11
Vue組件化常用方法之組件傳值與通信
這篇文章主要給大家介紹了關(guān)于Vue組件化常用方法之組件傳值與通信的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-03-03
vue中對監(jiān)聽esc事件和退出全屏問題的解決方案
這篇文章主要介紹了vue中對監(jiān)聽esc事件和退出全屏問題的解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-08-08