//router.js
import VueRouter from 'vue-router'
const A = () => import('./pages/a.vue');
const B = () => import('./pages/b.vue');
const AA = () => import('./pages/a.a.vue');
const AB = () => import('./pages/a.b.vue');
const routes = [
? ? {
? ? path: '/a', component: A,children:[{
? ? ? ? path:'a', component:AA
? ? },{
? ? ? ? path:'b', component:AB
? ? }]
},?
{
? ? path: '/b/:id', component: B, props: true
}]
const router = new VueRouter({
? ? mode: 'history',
? ? routes
})
export default router;

如上路由配置，編譯之后對應(yīng)的chunk為：

A —- 0.hash.js
B —- 1.hash.js
AA —- 2.hash.js
AB —- 3.chunk.js
當(dāng) url 為 /a 或 /b時正常，且兩者可以自由切換；
當(dāng)從 /a 切換為 /a/a 或 /a/b時也正常；
當(dāng)從/a/a 切換為 /a/b時報錯

vue-router.esm.js:1793 Error: Loading chunk 3 failed.

查看加載的路徑時 /a/3.hash.js 找不到；

解決方法

很可能是靜態(tài)資源路徑根未指定，相對路徑相對于當(dāng)前url目錄導(dǎo)致，修改：

//webpack.config.js
config.output.publicPath = '/';

懶加載組件路徑不對

最近在使用VueRouter的懶加載組件的時候.

const routes = [
? ? {
? ? ? ? path: '/',
? ? ? ? component: App
? ? },
? ? {
? ? ? ? path: '/category',
? ? ? ? component: resolve => {require(['./components/Category.vue'], resolve)}
? ? }
]

但是在加載/category的時候，我發(fā)現(xiàn)會報錯。

原來webpack會把這個懶加載單獨加載一個js，默認(rèn)按照

0.app.js 1.app.js ……的順序加載的

通過簡單的debug發(fā)現(xiàn)是0.app.js的路徑不對

通過webpack的設(shè)置即可解決（我使用的laravel，配置根據(jù)情況自行修改)

Elixir.webpack.mergeConfig({
? ? module: {
? ? ? ? loaders: [
? ? ? ? ? ? {
? ? ? ? ? ? ? ? test: /\.css/,
? ? ? ? ? ? ? ? loader: "style!css"
? ? ? ? ? ? }
? ? ? ? ]
? ? },
? ? output: {
? ? ? ? publicPath: "js/"
? ? }
})

配置下output下的publicPath即可。

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

您可能感興趣的文章: