欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2024年05月27日 11:19:51   作者：范特西是只貓  
今天整了一個項目,試了下打包,發(fā)下打包后只生成了一個css文件,和一個js文件,這樣肯定是不行的,因為這樣這個文件的包大小很大,第一次訪問會導(dǎo)致白屏問題,所以本文給大家介紹了vite打包只生成了一個css和js文件問題的解決方法,需要的朋友可以參考下

1. 打包遇到的問題

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

問題：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)文章

  • 詳解hooks在vue3中的使用方法及示例

    詳解hooks在vue3中的使用方法及示例

    hooks可以通過特定的函數(shù)將邏輯 "鉤入" 組件中,使得開發(fā)者能夠更靈活地構(gòu)建和管理組件的功能從而提高代碼的可讀性以及可維護性等,本篇文章將介紹hooks如何在vue3中使用以及它的一些實際使用例子,讓大家能更好的了解和使用hooks,需要的朋友可以參考下
    2023-09-09
  • Vue?+?Axios?請求接口方法與傳參方式詳解

    Vue?+?Axios?請求接口方法與傳參方式詳解

    使用Vue的腳手架搭建的前端項目，通常都使用Axios封裝的接口請求，項目中引入的方式不做多介紹，本文主要介紹接口調(diào)用與不同形式的傳參方法。對Vue?+?Axios?請求接口方法與傳參問題感興趣的朋友一起看看吧
    2021-12-12
  • Vue3項目pc端瀏覽器樣式正常但移動端部分樣式失效問題的解決方法

    Vue3項目pc端瀏覽器樣式正常但移動端部分樣式失效問題的解決方法

    這篇文章主要介紹了Vue3項目pc端瀏覽器樣式正常但移動端部分樣式失效問題的解決方法,文中通過圖文講解的非常詳細,具有一定的參考價值,需要的朋友可以參考下
    2024-07-07
  • elementui上傳文件不允許重名的解決方案

    elementui上傳文件不允許重名的解決方案

    用戶可以多文件上傳 ,在上傳到服務(wù)器之前需要檢查服務(wù)器中有無重名的文件,如果有會返回重名文件的名稱數(shù)組,這些文件需要一個一個的向用戶確認是否要覆蓋重傳,這篇文章主要介紹了elementui上傳文件不允許重名,需要的朋友可以參考下
    2024-02-02
  • Vue下拉框雙向聯(lián)動效果的示例代碼

    Vue下拉框雙向聯(lián)動效果的示例代碼

    這篇文章主要介紹了Vue下拉框雙向聯(lián)動效果,實現(xiàn)聯(lián)動，大家都知道在vue的頁面中，想要實現(xiàn)多個<el-select 下拉框的值動態(tài)改變，必須要調(diào)用@change 函數(shù)，具體操作方法跟隨小編一起學(xué)習(xí)下吧
    2022-04-04
  • Vuejs從數(shù)組中刪除元素的示例代碼

    Vuejs從數(shù)組中刪除元素的示例代碼

    這篇文章主要介紹了Vuejs從數(shù)組中刪除元素的示例代碼,本文結(jié)合實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
    2023-02-02
  • vue實現(xiàn)商品詳情頁功能之商品選項卡

    vue實現(xiàn)商品詳情頁功能之商品選項卡

    這篇文章主要為大家詳細介紹了vue實現(xiàn)商品詳情頁功能之商品選項卡，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2021-04-04
  • 淺談vue2 單頁面如何設(shè)置網(wǎng)頁title

    淺談vue2 單頁面如何設(shè)置網(wǎng)頁title

    這篇文章主要介紹了淺談vue2 單頁面如何設(shè)置網(wǎng)頁title,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-11-11
  • Vue組件化常用方法之組件傳值與通信

    Vue組件化常用方法之組件傳值與通信

    這篇文章主要給大家介紹了關(guān)于Vue組件化常用方法之組件傳值與通信的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2021-03-03
  • vue中對監(jiān)聽esc事件和退出全屏問題的解決方案

    vue中對監(jiān)聽esc事件和退出全屏問題的解決方案

    這篇文章主要介紹了vue中對監(jiān)聽esc事件和退出全屏問題的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2022-08-08

最新評論