vue2路由表中異步加載組件命名方式
vue2路由表中異步加載組件命名
在Vue2中，路由表中引入組件時，可以使用動態(tài)導(dǎo)入（Dynamic Import）的方式來異步加載組件，以提升頁面加載速度和降低初始加載的體積。
在這種方式下，會配合這種注釋 /* webpackChunkName: “” / 來對異步加載的組件進(jìn)行命名。
關(guān)于異步加載的組件命名的解釋
一、為什么需要使用組件命名
首先，明確一點，如果不使用組件命名不會有什么影響，可以正常進(jìn)行項目打包，但是webpack將組件打包成一個單獨的chunk文件后，該文件會被默認(rèn)命名為一個數(shù)字；這樣會影響開發(fā)者在調(diào)試時無法提供組件包名去定位問題。
同時，這種命名還可以幫助webpack在打包時進(jìn)行代碼分割，也就是將不同的組件打包成不同的chunk文件，以達(dá)到更好的性能優(yōu)化效果。
因此，使用了注釋/* webpackChunkName: “” /，也就是組件命名后，webpack會將打包的chunk文件命名為我們自己定義的名稱，一般這個名稱與我們的組件名稱一樣，可以方便開發(fā)者在調(diào)試時定位問題；其次，可以幫助webpack進(jìn)行代碼分割，提高頁面加載速度，降低初始加載的項目體積。
二、如何使用組件命名
// ...
const router = new Router({
routes: [
{
path: '/home',
component: () => import(/* webpackChunkName: "home" */ '../views/Home.vue'),
meta: { title: '首頁' },
}
]
})
// ...上面示例中，在路由路徑為home的路由中，動態(tài)加載對應(yīng)的頁面組件，在import里面添加了組件命名。
vue路由動態(tài)異步解析錯誤
報錯
問題
92行報錯因為異步加載動態(tài)組件，需要解析文件路徑，在vue打包中，會把 @/ 這種路徑轉(zhuǎn)為相對路徑，但是動態(tài)組件的話，是打包后，生產(chǎn)環(huán)境中是無法解析 @/ 這種語法路徑，所以會報錯。
解決
把需要異步加載的組件按93行或者94行形式
例如：
return () => import(@/views/${this.compName}.vue)打包后，會提前解析**@/views和@/components**
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue報錯:Injection?"xxxx"?not?found的解決辦法
這篇文章主要給大家介紹了關(guān)于Vue報錯:Injection?"xxxx"?not?found的解決辦法,文中通過圖文將解決的辦法介紹的非常詳細(xì),對大家的學(xué)習(xí)具有一定的參考借鑒價值,需要的朋友可以參考下2023-07-07
Vue拿到二進(jìn)制流圖片如何轉(zhuǎn)為正常圖片并顯示
這篇文章主要介紹了Vue拿到二進(jìn)制流圖片如何轉(zhuǎn)為正常圖片并顯示，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
vue3.0基于views批量實現(xiàn)動態(tài)路由的方法(示例代碼)
以前vue項目中也有很多實現(xiàn)動態(tài)路由的方法,比如有一些項目涉及權(quán)限的可能會使用api請求路由數(shù)據(jù)在來createRouter,或者本地構(gòu)建使用routes.push來動態(tài)構(gòu)建路由, 今天介紹一種新的方式來基于某個文件夾批量構(gòu)建動態(tài)路由的方法,感興趣的朋友一起看看吧2024-12-12
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)分頁的三種效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06
這篇文章主要為大家詳細(xì)介紹了vue使用動畫實現(xiàn)滾動表格效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了利用Vue實現(xiàn)數(shù)字翻滾動畫效果,通過Vue的響應(yīng)式數(shù)據(jù)更新結(jié)合CSS3的動畫效果,我們可以實現(xiàn)非?？犰诺臄?shù)字翻滾效果,給數(shù)據(jù)可視化帶來更多動感和吸引力,需要的朋友參考下吧2024-04-04
這篇文章主要介紹了Sublime Text新建.vue模板并高亮(圖文教程)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
我們都知道跨域是同源策略導(dǎo)致的,域名不同、協(xié)議不同、端口號不同任意一種情況都會導(dǎo)致跨域,這篇文章主要介紹了從Vue到Postman全面驗證API接口跨域問題,需要的朋友可以參考下2024-08-08
這篇文章主要介紹的是如何用Vue做一個簡單的隨機點名冊，主要是做個簡單的點名器，不做樣式,需要的朋友可以參考一下，希望對你有所幫助2021-12-12
本文介紹了如何在項目中創(chuàng)建和使用自定義插件,以在構(gòu)建過程中檢查版本號,具體步驟包括在項目根目錄下創(chuàng)建buildLifeHook.ts文件,并在public目錄下創(chuàng)建version文件夾,然后在vite.config.ts中引用該插件,并在src/utils目錄下創(chuàng)建XxzUtils.ts文件2024-12-12