vue 懒加载组件chunk相对路径混乱问题
问题描述:在vue项目中用vue-router做路由,做代码分割和懒加载时,由于webpack配置不当,导致懒加载chunk时相对路径出现混乱导致加载chunk失败,具体如下://router.jsimport VueRouter from 'vue-router'const A = () => import('./pages/a.vue');const B = () =&g
·
问题描述:
在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 = '/';
更多推荐
已为社区贡献1条内容
所有评论(0)