vue 懒加载组件chunk相对路径混乱问题及解决
懒加载组件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即可。
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
vue3 setup语法糖各种语法新特性的使用方法(vue3+vite+pinia)
这篇文章主要介绍了vue3 setup语法糖各种语法新特性的使用(vue3+vite+pinia),本文主要是记录vue3的setup语法糖的各种新语法的使用方法,需要的朋友可以参考下2022-09-09
最新评论