iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue 懒加载组件chunk相对路径混乱问题及解决
  • 486
分享到

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

2024-04-02 19:04:59 486人浏览 安东尼
摘要

目录懒加载组件chunk相对路径混乱问题问题描述具体如下解决方法懒加载组件 路径不对懒加载组件chunk相对路径混乱问题 问题描述 在Vue项目中用vue-router做路由,做代码

懒加载组件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即可。 

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

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

本文链接: https://www.lsjlt.com/news/144781.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • vue 懒加载组件chunk相对路径混乱问题及解决
    目录懒加载组件chunk相对路径混乱问题问题描述具体如下解决方法懒加载组件 路径不对懒加载组件chunk相对路径混乱问题 问题描述 在vue项目中用vue-router做路由,做代码...
    99+
    2024-04-02
  • vue异步组件与组件懒加载问题怎么解决
    本篇内容主要讲解“vue异步组件与组件懒加载问题怎么解决”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue异步组件与组件懒加载问题怎么解决”吧!vue异步组件与组件懒加载在写项目的时候,需要动...
    99+
    2023-06-29
  • vue异步组件与组件懒加载问题(import不能导入变量字符串路径)
    目录vue异步组件与组件懒加载错误的原因分析解决方案一解决方案二vue懒加载组件 路径不对vue异步组件与组件懒加载 在写项目的时候,需要动态配置路由菜单,所有的菜单都是通过配置生成...
    99+
    2024-04-02
  • vue css相对路径导入问题怎么解决
    本篇内容介绍了“vue css相对路径导入问题怎么解决”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!前提npm inst...
    99+
    2023-06-30
  • Python多模块引用由此引发的相对路径混乱问题怎么解决
    这篇文章主要介绍“Python多模块引用由此引发的相对路径混乱问题怎么解决”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Python多模块引用由此引发的相对路径混乱问题怎么解决”文章能帮助大家解决问...
    99+
    2023-07-05
  • Vue打包后相对路径的引用问题怎么解决
    这篇“Vue打包后相对路径的引用问题怎么解决”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“Vue打包后相对路径的引用问题怎么...
    99+
    2023-06-30
  • vue项目中图片懒加载时出现的问题及解决
    目录vue图片懒加载的问题vue图片懒加载实现步骤vue图片懒加载踩过的坑今天踩过的坑总结vue图片懒加载的问题 项目中遇到一个问题,记录一下,vue项目中前期没有做图片懒加载的时候...
    99+
    2024-04-02
  • vue项目中使用axios遇到的相对路径和绝对路径问题怎么解决
    这篇文章主要讲解了“vue项目中使用axios遇到的相对路径和绝对路径问题怎么解决”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“vue项目中使用axios遇到的相对路径和绝对路径问题怎么解决...
    99+
    2023-06-30
  • 如何解决Vue中SSR组件加载问题
    这篇文章主要介绍如何解决Vue中SSR组件加载问题,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!Node 端渲染提示 window/document 没有定义业务场景首先来看一个简单...
    99+
    2024-04-02
  • Vue不能下载xls以及文件乱码问题解决
    发现问题 老大要让我实现下载xls文件的功能,我想了想:我好像不太会耶! 但是我们之前写的一个页面有一个下载xls的功能,那我就CV大法,嘿嘿嘿。 当我点击下载按钮的那一刻,控制台红...
    99+
    2024-04-02
  • 解决docker run中使用 ./ 相对路径挂载文件或目录失败的问题
    docker-compose.yml文件中允许使用'./'相对路径 version: '3' ... volumes: - ./init-mongo.js:/docker-...
    99+
    2024-04-02
  • 如何解决vue的v-for循环中图片加载路径问题
    这篇文章将为大家详细讲解有关如何解决vue的v-for循环中图片加载路径问题,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。先看一下产品需求,如下图所示,产品要求图片和它的...
    99+
    2024-04-02
  • vue组件和iframe页面的相互传参问题及解决
    目录vue组件和iframe页面相互传参vue组件调用iframe页面方法和参数iframe页面向vue组件传参内嵌iframe页面并进行传值vue组件和iframe页面相互传参 目...
    99+
    2024-04-02
  • 使用jpa的实体对象转json符串时懒加载的问题及解决
    目录解决转json符串时懒加载问题方法(1)解决转json符串时懒加载问题方法(2)Rest风格中关于JPA使用懒加载的坑解决转json符串时懒加载问题方法(1) 1.导入hiber...
    99+
    2024-04-02
  • VUE 路由动态加载的常见问题及解决方案:为您的应用保驾护航
    常见的 Vue 路由动态加载问题 组件加载失败: 这是最常见的 Vue 路由动态加载问题之一。它可能由多种原因引起,例如组件路径错误、组件定义错误或网络连接问题。 组件加载慢: 组件加载慢也会导致应用性能下降。这可能由多种原因引起,例如...
    99+
    2024-02-08
    Vue 路由 动态加载 异步组件 性能优化
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作