源码搜藏网

懒加载组件chunk相对路径混乱问题

问题描述

在vue项目中用vue-router做路由，做代码分割和懒加载时，由于webpack配置不当，导致懒加载chunk时相对路径出现混乱导致加载chunk失败

具体如下

//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;

如上路由配置，编译之后对应的chunk为：

• A —- 0.hash.js
• B —- 1.hash.js
• AA —- 2.hash.js
• AB —- 3.chunk.js
• 当 url 为 /a 或 /b时正常，且两者可以自由切换；
• 当从 /a 切换为 /a/a 或 /a/b时也正常；
• 当从/a/a 切换为 /a/b时报错

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

查看加载的路径时 /a/3.hash.js 找不到；

解决方法

很可能是静态资源路径根未指定，相对路径相对于当前url目录导致，修改：

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

懒加载组件 路径不对

最近在使用VueRouter的懒加载组件的时候.

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

但是在加载/category的时候，我发现会报错。

原来webpack会把这个懒加载单独加载一个js，默认按照

0.app.js 1.app.js ……的顺序加载的

通过简单的debug发现是0.app.js的路径不对

通过webpack的设置即可解决（我使用的laravel，配置根据情况自行修改)

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

配置下output下的publicPath即可。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持源码搜藏网。