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

vue2路由表中異步加載組件命名方式

 更新時間：2024年06月29日 16:49:33   作者：沐沐茶壺  
這篇文章主要介紹了vue2路由表中異步加載組件命名方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

vue2路由表中異步加載組件命名

在Vue2中，路由表中引入組件時，可以使用動態(tài)導(dǎo)入（Dynamic Import）的方式來異步加載組件，以提升頁面加載速度和降低初始加載的體積。

在這種方式下，會配合這種注釋 /* webpackChunkName: “” / 來對異步加載的組件進(jìn)行命名。

關(guān)于異步加載的組件命名的解釋

一、為什么需要使用組件命名

首先，明確一點(diǎn)，如果不使用組件命名不會有什么影響，可以正常進(jìn)行項(xiàng)目打包，但是webpack將組件打包成一個單獨(dú)的chunk文件后，該文件會被默認(rèn)命名為一個數(shù)字；這樣會影響開發(fā)者在調(diào)試時無法提供組件包名去定位問題。

同時，這種命名還可以幫助webpack在打包時進(jìn)行代碼分割，也就是將不同的組件打包成不同的chunk文件，以達(dá)到更好的性能優(yōu)化效果。

因此，使用了注釋/* webpackChunkName: “” /，也就是組件命名后，webpack會將打包的chunk文件命名為我們自己定義的名稱，一般這個名稱與我們的組件名稱一樣，可以方便開發(fā)者在調(diào)試時定位問題；其次，可以幫助webpack進(jìn)行代碼分割，提高頁面加載速度，降低初始加載的項(xiàng)目體積。

二、如何使用組件命名

// ...
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)異步解析錯誤

報(bào)錯

問題

92行報(bào)錯因?yàn)楫惒郊虞d動態(tài)組件，需要解析文件路徑，在vue打包中，會把 @/ 這種路徑轉(zhuǎn)為相對路徑，但是動態(tài)組件的話，是打包后，生產(chǎn)環(huán)境中是無法解析 @/ 這種語法路徑，所以會報(bào)錯。

解決

把需要異步加載的組件按93行或者94行形式

例如：

return () => import(@/views/${this.compName}.vue)

打包后，會提前解析**@/views和@/components**

總結(jié)

以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論