快捷導(dǎo)航

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

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

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

1. 打包遇到的問(wèn)題

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

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

在這里插入圖片描述

2. 問(wèn)題原因及修改

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

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

我看了我的頁(yè)面路由代碼，果然是這樣引入的

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ù)頁(yè)面分js和css了

在這里插入圖片描述

以上就是vite打包只生成了一個(gè)css和js文件問(wèn)題的解決方法的詳細(xì)內(nèi)容，更多關(guān)于vite打包只生成個(gè)css和js文件的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

相關(guān)文章

vue2滾動(dòng)條加載更多數(shù)據(jù)實(shí)現(xiàn)代碼
本篇文章主要介紹了vue2滾動(dòng)條加載更多數(shù)據(jù)實(shí)現(xiàn)代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-01-01
Vue?Element?plus使用方法梳理
Element?Plus，由餓了么大前端團(tuán)隊(duì)開源出品的一套為開發(fā)者、設(shè)計(jì)師和產(chǎn)品經(jīng)理準(zhǔn)備的基于?Vue?3.0?的組件庫(kù)，Element?Plus是基于Vue3面向設(shè)計(jì)師和開發(fā)者的組件庫(kù)，提供了配套設(shè)計(jì)資源，幫助你的網(wǎng)站快速成型
2022-12-12
vue-cli3搭建項(xiàng)目的詳細(xì)步驟
這篇文章主要介紹了vue-cli3搭建項(xiàng)目的詳細(xì)步驟，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-12-12
Vue創(chuàng)建頭部組件示例代碼詳解
本文通過(guò)實(shí)例代碼給大家介紹了Vue創(chuàng)建頭部組件的相關(guān)知識(shí)，非常不錯(cuò)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下
2018-10-10
淺談angular4.0中路由傳遞參數(shù)、獲取參數(shù)最nice的寫法
下面小編就為大家分享一篇淺談angular4.0中路由傳遞參數(shù)、獲取參數(shù)最nice的寫法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-03-03
Vue中@click.stop和@click.prevent實(shí)例詳解
當(dāng)我們使用Vue.js開發(fā)前端應(yīng)用時(shí),經(jīng)常會(huì)在模版中使用@click指令來(lái)響應(yīng)用戶的點(diǎn)擊事件,這篇文章主要給大家介紹了關(guān)于Vue中@click.stop和@click.prevent的相關(guān)資料,需要的朋友可以參考下
2024-04-04
Vue多頁(yè)面配置打包性能優(yōu)化方式(解決加載包太大加載慢問(wèn)題)
這篇文章主要介紹了Vue多頁(yè)面配置打包性能優(yōu)化方式(解決加載包太大加載慢問(wèn)題)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-01-01
Vue-CLI3.x 自動(dòng)部署項(xiàng)目至服務(wù)器的方法步驟
本教程講解的是 Vue-CLI 3.x 腳手架搭建的vue項(xiàng)目, 利用scp2自動(dòng)化部署到靜態(tài)文件服務(wù)器 Nginx，感興趣的可以了解一下
2021-11-11
Vue 使用beforeEach實(shí)現(xiàn)登錄狀態(tài)檢查功能
今天小編就為大家分享一篇Vue 使用beforeEach實(shí)現(xiàn)登錄狀態(tài)檢查功能，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-10-10
在vant中如何使用dialog彈窗
這篇文章主要介紹了在vant中如何使用dialog彈窗，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-05-05