vue 懒加载组件chunk相对路径混乱问题及解决
2022-04-01 17:45:59 来源：易采站长站 作者：
目录
懒加载组件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.jsB —- 1.hash.jsAA —- 2.hash.jsAB —- 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即可。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持易采站长站。
如有侵权，请联系QQ:279390809 电话：15144810328
最新图文推荐
相关文章
-
大家都知道，11月30日晚上，联想在其直播晚会上面发布了两款全新的电竞笔记本电脑，其中一款就是拯救者y9000x，随着新鲜血液的加入，让用户开心的同时也不知道该如何挑选适合自己的笔记本，今天小编就为大家带来拯救者y9000x和y7000p对比，感兴趣的朋友不要错过了。1、拯救者y9000x和y7000p参数对比2、拯救者y9000x和y7000p哪个好？Y7000p因为其电竞屏的配置，是一款典型的2020-12-03
-
大家都知道，骁龙870 5G移动平台已经正式发布了，骁龙870更像是对骁龙865的一次终极优化升级，那么骁龙870性能究竟怎么样？骁龙870和骁龙865plus相比哪个性能更好？小编为大家带来关于骁龙870和骁龙865plus的详细对比，感兴趣的朋友不要错过了。1、主要参数对比2、CPU骁龙870采用了“1+3+4”八核架构，一个A77超大核最高频率可达3.2GHz。骁龙82021-01-20
-
很多小伙伴想要自己配置一台电脑，到挑选显卡的时候，不知道通过哪些显卡参数来判断一块显卡的性能好坏。为此，小编特意整理了本篇教程，帮助大家了解我们主要通过看显卡的哪几个参数，来得知显卡的性能强弱。如何判断显卡性能高低？显卡性能主要看哪些参数？ 第一，流处理器，这个数量越多越好，数量多它的出图速度就越快，这个在显卡参数里面，有的标为流处理器数量，有的是标为CUDA核心数量。 第二，显卡核心频率2021-03-23
-
显卡1060和1050ti怎么选 显卡1060和1050ti区别对比
显卡是电脑的重要组成部分之一，因此显卡的选择是非常重要的。有些朋友喜欢装gtx1060，而有些朋友就会喜欢装gtx1050ti。这两个显卡有什么区别呢？下面小编就给大家讲讲显卡1060和1050ti的区别有哪些。 显卡1060和1050ti区别对比： 为了比较直观的了解gtx1060与gtx1050ti显卡的区别，以图片的形式罗列出两者的参数。 1、GTX1060的性能比GTX1050T2021-03-24
-
问题前瞻1. 为什么css需要放在头部？2. js为什么要放在body后面？3. 图片的加载和渲染会阻塞页面DOM构建吗？4. dom解析完才出现页面吗？5. 首屏时间根据什么来判定？浏览器渲染1.浏览器渲染图解浏览器渲染页面主要经历了下面的步骤：1.处理 HTML 标记并构建 DOM 树。2.处理 CSS 标记并构建 CSSOM 树。3.将 DOM 与 CSSOM 合并成一个渲染树。4.根据渲染2021-05-17
-
一、饿汉式创建优势工厂创建之后，会将Spring配置文件中的所有对象都创建完成（饿汉式）。提高程序运行效率。避免多次IO，减少对象创建时间。（概念接近连接池，一次性创建好，使用时直接获取）二、生命周期方法 自定义初始化方法：添加“init-method”属性，Spring则会在创建对象之后，调用此方法。 自定义销毁方法：添加“destroy-method”属性，Spring则会在销毁对2021-05-19
-
大纲Python文件类型及汇总一、元组1 特征1.任意对象的有序集合2.通过下标访问3.不可变4.长度固定，任意类型，任意嵌套>>> t = (1,2,3,4,5)>>> t[0] = 2Traceback (most recent call last): File "2021-05-19", line 1, in TypeError: 'tuple' object does not
-
华为MateView GT值得入手吗 华为MateView GT详细评测
5月19日华为召开新品发布会，正式进军显示器领域，并带来华为MateView和华为MateView GT两款产品，一款直面，一款曲面。华为此时进入显示器领域和当前消费者对于显示要求以及多屏办公娱乐的需求分不开，尤其是在越来也注重效率的当下，显示器早已不再是台式机的专属，很多笔记本用户也会在本身屏幕之外选择一款显示器作为第二块屏幕，从而实现更高效的办公、学习和娱乐。华为MateView GT详细评测2021-05-20
豫公网安备 41019702003123号