vue2路由表中異步加載組件命名方式
vue2路由表中異步加載組件命名
在Vue2中，路由表中引入組件時(shí)，可以使用動(dòng)態(tài)導(dǎo)入（Dynamic Import）的方式來異步加載組件，以提升頁面加載速度和降低初始加載的體積。
在這種方式下，會(huì)配合這種注釋 /* webpackChunkName: “” / 來對異步加載的組件進(jìn)行命名。
關(guān)于異步加載的組件命名的解釋
一、為什么需要使用組件命名
首先，明確一點(diǎn)，如果不使用組件命名不會(huì)有什么影響，可以正常進(jìn)行項(xiàng)目打包，但是webpack將組件打包成一個(gè)單獨(dú)的chunk文件后，該文件會(huì)被默認(rèn)命名為一個(gè)數(shù)字；這樣會(huì)影響開發(fā)者在調(diào)試時(shí)無法提供組件包名去定位問題。
同時(shí)，這種命名還可以幫助webpack在打包時(shí)進(jìn)行代碼分割，也就是將不同的組件打包成不同的chunk文件，以達(dá)到更好的性能優(yōu)化效果。
因此，使用了注釋/* webpackChunkName: “” /，也就是組件命名后，webpack會(huì)將打包的chunk文件命名為我們自己定義的名稱，一般這個(gè)名稱與我們的組件名稱一樣，可以方便開發(fā)者在調(diào)試時(shí)定位問題；其次，可以幫助webpack進(jìn)行代碼分割，提高頁面加載速度，降低初始加載的項(xiàng)目體積。
二、如何使用組件命名
// ...
const router = new Router({
routes: [
{
path: '/home',
component: () => import(/* webpackChunkName: "home" */ '../views/Home.vue'),
meta: { title: '首頁' },
}
]
})
// ...上面示例中，在路由路徑為home的路由中，動(dòng)態(tài)加載對應(yīng)的頁面組件，在import里面添加了組件命名。
vue路由動(dòng)態(tài)異步解析錯(cuò)誤
報(bào)錯(cuò)
問題
92行報(bào)錯(cuò)因?yàn)楫惒郊虞d動(dòng)態(tài)組件，需要解析文件路徑，在vue打包中，會(huì)把 @/ 這種路徑轉(zhuǎn)為相對路徑，但是動(dòng)態(tài)組件的話，是打包后，生產(chǎn)環(huán)境中是無法解析 @/ 這種語法路徑，所以會(huì)報(bào)錯(cuò)。
解決
把需要異步加載的組件按93行或者94行形式
例如：
return () => import(@/views/${this.compName}.vue)打包后，會(huì)提前解析**@/views和@/components**
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue實(shí)現(xiàn)壓縮圖片預(yù)覽并上傳功能（promise封裝）
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)壓縮圖片預(yù)覽并上傳功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-01-01
vue 實(shí)現(xiàn)element-ui中的加載中狀態(tài)
這篇文章主要介紹了vue 實(shí)現(xiàn)element-ui中的加載中狀態(tài)，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
vue實(shí)現(xiàn)頁面自適應(yīng)的常用4種方法
前端頁面自適應(yīng)有很多方法可以實(shí)現(xiàn),本文小編將為大家詳細(xì)介紹四種常用的方法,并提供相應(yīng)的代碼示例,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-10-10
這篇文章主要介紹了Vue2.x與Vue3.x中路由鉤子的區(qū)別，分別介紹了路由鉤子的分類，路由配置守衛(wèi)鉤子以及組件內(nèi)守衛(wèi)鉤子等有需要的朋友可以借鑒參考下2021-09-09
輕量級富文本編輯器wangEditor結(jié)合vue使用方法示例
在我們項(xiàng)目中，有些時(shí)候需要使用富文本編輯器。本文將以百度開發(fā)的Ueditor結(jié)合Vue.js介紹一下。非常具有實(shí)用價(jià)值，需要的朋友可以參考下2018-10-10
vue element-ui實(shí)現(xiàn)input輸入框金額數(shù)字添加千分位
這篇文章主要介紹了vue element-ui實(shí)現(xiàn)input輸入框金額數(shù)字添加千分位,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-12-12
vue中對監(jiān)聽esc事件和退出全屏問題的解決方案
這篇文章主要介紹了vue中對監(jiān)聽esc事件和退出全屏問題的解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue web前端三大主流框架之一,是一套用于構(gòu)建用戶界面的漸進(jìn)式框架,下面這篇文章主要給大家介紹了關(guān)于Vue安裝與配置教程的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06
vue實(shí)現(xiàn)商品列表的添加刪除實(shí)例講解
在本篇內(nèi)容里小編給大家分享的是關(guān)于vue實(shí)現(xiàn)商品列表的添加刪除實(shí)例講解，有興趣的朋友們可以參考下。2020-05-05
Vue 3 的 Composition API 帶來了強(qiáng)大的 reactive 函數(shù),它允許你在 Vue 應(yīng)用程序中創(chuàng)建響應(yīng)式數(shù)據(jù),本文我們將深入探討 Vue 3 的 reactive,并提供一些注意事項(xiàng)和解決方案,希望可以幫助打更好地使用它2023-11-11