vue2路由表中異步加載組件命名方式
vue2路由表中異步加載組件命名
在Vue2中，路由表中引入組件時，可以使用動態(tài)導(dǎo)入（Dynamic Import）的方式來異步加載組件，以提升頁面加載速度和降低初始加載的體積。
在這種方式下，會配合這種注釋 /* webpackChunkName: “” / 來對異步加載的組件進行命名。
關(guān)于異步加載的組件命名的解釋
一、為什么需要使用組件命名
首先，明確一點，如果不使用組件命名不會有什么影響，可以正常進行項目打包，但是webpack將組件打包成一個單獨的chunk文件后，該文件會被默認(rèn)命名為一個數(shù)字；這樣會影響開發(fā)者在調(diào)試時無法提供組件包名去定位問題。
同時，這種命名還可以幫助webpack在打包時進行代碼分割，也就是將不同的組件打包成不同的chunk文件，以達到更好的性能優(yōu)化效果。
因此，使用了注釋/* webpackChunkName: “” /，也就是組件命名后，webpack會將打包的chunk文件命名為我們自己定義的名稱，一般這個名稱與我們的組件名稱一樣，可以方便開發(fā)者在調(diào)試時定位問題；其次，可以幫助webpack進行代碼分割，提高頁面加載速度，降低初始加載的項目體積。
二、如何使用組件命名
// ...
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實現(xiàn)壓縮圖片預(yù)覽并上傳功能（promise封裝）
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)壓縮圖片預(yù)覽并上傳功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-01-01
vue 實現(xiàn)element-ui中的加載中狀態(tài)
這篇文章主要介紹了vue 實現(xiàn)element-ui中的加載中狀態(tài)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
前端頁面自適應(yīng)有很多方法可以實現(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使用方法示例
在我們項目中，有些時候需要使用富文本編輯器。本文將以百度開發(fā)的Ueditor結(jié)合Vue.js介紹一下。非常具有實用價值，需要的朋友可以參考下2018-10-10
vue element-ui實現(xiàn)input輸入框金額數(shù)字添加千分位
這篇文章主要介紹了vue element-ui實現(xiàn)input輸入框金額數(shù)字添加千分位,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2019-12-12
vue中對監(jiān)聽esc事件和退出全屏問題的解決方案
這篇文章主要介紹了vue中對監(jiān)聽esc事件和退出全屏問題的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue web前端三大主流框架之一,是一套用于構(gòu)建用戶界面的漸進式框架,下面這篇文章主要給大家介紹了關(guān)于Vue安裝與配置教程的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06
在本篇內(nèi)容里小編給大家分享的是關(guān)于vue實現(xiàn)商品列表的添加刪除實例講解，有興趣的朋友們可以參考下。2020-05-05
Vue 3 的 Composition API 帶來了強大的 reactive 函數(shù),它允許你在 Vue 應(yīng)用程序中創(chuàng)建響應(yīng)式數(shù)據(jù),本文我們將深入探討 Vue 3 的 reactive,并提供一些注意事項和解決方案,希望可以幫助打更好地使用它2023-11-11