vue 懒加载组件chunk相对路径混乱问题及解决

 更新时间:2022年04月01日 15:24:36   作者:天涯苍狗  
这篇文章主要介绍了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即可。 

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue实现简单的跑马灯

    Vue实现简单的跑马灯

    这篇文章主要为大家详细介绍了Vue实现简单的跑马灯,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-05-05
  • vue3 setup语法糖各种语法新特性的使用方法(vue3+vite+pinia)

    vue3 setup语法糖各种语法新特性的使用方法(vue3+vite+pinia)

    这篇文章主要介绍了vue3 setup语法糖各种语法新特性的使用(vue3+vite+pinia),本文主要是记录vue3的setup语法糖的各种新语法的使用方法,需要的朋友可以参考下
    2022-09-09
  • vue2.0移除或更改的一些东西(移除index key)

    vue2.0移除或更改的一些东西(移除index key)

    这篇文章主要介绍了vue2.0移除或更改的一些东西,vue2.0 移除了index和key,具体内容详情大家参考下本文
    2017-08-08
  • vue-cli入门之项目结构分析

    vue-cli入门之项目结构分析

    本篇文章主要介绍了vue-cli入门之项目结构,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-04-04
  • 如何在Vue中获取DOM元素的实际宽高

    如何在Vue中获取DOM元素的实际宽高

    使用vue的时候,想要获得一个指定的元素的高度时,下面这篇文章主要给大家介绍了关于如何在Vue中获取DOM元素的实际宽高的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-09-09
  • Vue项目报错:parseComponent问题及解决

    Vue项目报错:parseComponent问题及解决

    这篇文章主要介绍了Vue项目报错:parseComponent问题及解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-05-05
  • vue3中使用props和emits并指定其类型与默认值

    vue3中使用props和emits并指定其类型与默认值

    props是Vue3中的一个重要概念,它允许我们将数据从父组件传递到子组件,下面这篇文章主要给大家介绍了关于vue3中使用props和emits并指定其类型与默认值的相关资料,需要的朋友可以参考下
    2023-04-04
  • 解决vue点击控制单个样式的问题

    解决vue点击控制单个样式的问题

    今天小编就为大家分享一篇解决vue点击控制单个样式的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue @input和@click的区别及说明

    vue @input和@click的区别及说明

    这篇文章主要介绍了vue @input和@click的区别及说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • vue组件之间数据传递的方法实例分析

    vue组件之间数据传递的方法实例分析

    这篇文章主要介绍了vue组件之间数据传递的方法,结合实例形式分析了vue.js父组件与子组件之间数据传递相关操作技巧,需要的朋友可以参考下
    2019-02-02

最新评论