目录懒加载组件chunk相对路径混乱问题问题描述具体如下解决方法懒加载组件 路径不对懒加载组件chunk相对路径混乱问题 问题描述 在Vue项目中用vue-router做路由,做代码
在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为:
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即可。
以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。
--结束END--
本文标题: vue 懒加载组件chunk相对路径混乱问题及解决
本文链接: https://lsjlt.com/news/144781.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0