webpack3打包vue-router实现懒加载报错Loading chunk 0 failed.

环境

webpack@3.8.1
babel-core@6.26.0
babel-plugin-syntax-dynamic-import@6.18.0
vue@2.5.13
vue-router@3.0.1

懒加载实现逻辑

vue-router路由的实现

const Index = () => import(/* webpackChunkName: "index" */ './pages/index/index.vue');
const T1 = () => import(/* webpackChunkName: "t1" */ './pages/temp/t1.vue');
const T2 = () => import(/* webpackChunkName: "t2" */ './pages/temp/t2.vue');

webpack的配置

 output: {
    path: '...', 
    filename: 'app.js',
    chunkFilename: '[name].[chunkhash].js'
},
module: {
    rules: [
        {
            test: /\.vue$/,
            loader: 'vue-loader',
        },
        {
            test: /\.js$/,
            loader: 'babel-loader',
            exclude: /node_modules/,
            options: {
                presets: ['es2015', 'stage-2'],
                plugins: ['syntax-dynamic-import']
            }
        }
    ]
}
执行异常
Error: Loading chunk 0 failed.
问题

简单的说就是 app.js 无法正常加载,vue-router 懒加载生成的分块文件,因为请求资源是从根目录请求的,不是通过相对路径进行请求,因此报异常,无法请求到资源,想请问一下有什么办法可以设置打包时,请求资源不要从根目录进行请求不?如何可以避免出现 Loading chunk 0 failed
(请不要通过 vue-router 的 onError 进行处理)

阅读 3.4k
1 个回答

已经解决,通过设置 webpack 的 filename 可以设置对应的路径的(哭笑)

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进