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

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

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue webpack build资源相对路径的问题及解决方法

    默认情况webpack+vue-cli打包的css.js等静态资源路径都是绝对的,即static在根目录下,如果部署到带有文件夹目录的项目中,资源路径就会出错. 如图: 解决方法: 在webpack.prod.conf.js中,output中添加或者修改为 publicPath: './': output: { publicPath: './', path: config.build.assetsRoot, filename: utils.assetsPath('js/[name].[chunk

  • Vue Router的懒加载路径的解决方法

    单页应用产出的入口chunk大小随着业务的复杂度线性增加,导致后期加载速度越来越慢.后面就需要对不同路径下的模块进行拆分,打包到相应的chunk下,按需加载,找到chunk的大小.个数和页面加载速度的平衡点. 解决办法 .vue模块文件按需加载,其实要做到两件事情:一是标记出这是一个异步组件:二是通知webpack把该组件单独产出为一个chunk. vue的异步组件 官网给出的异步组件写法:异步组件是一个函数,函数的返回值是一个Promise,只是Promise的resolve函数的参数是常规组

  • vue2组件实现懒加载浅析

    vue2组件实现懒加载浅析

    一. 什么是懒加载 懒加载也叫延迟加载,即在需要的时候进行加载,随用随载. 二.为什么需要懒加载 在单页应用中,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,延时过长,不利于用户体验,而运用懒加载则可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力,减少首页加载用时 三.如何与webpack配合实现组件懒加载 1.在webpack配置文件中的output路径配置chunkFilename属性 output: { pat

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

    目录 懒加载组件chunk相对路径混乱问题 问题描述 具体如下 解决方法 懒加载组件 路径不对 懒加载组件chunk相对路径混乱问题 问题描述 在vue项目中用vue-router做路由,做代码分割和懒加载时,由于webpack配置不当,导致懒加载chunk时相对路径出现混乱导致加载chunk失败 具体如下 //router.js import VueRouter from 'vue-router' const A = () => import('./pages/a.vue'); const B

  • Angular懒加载机制刷新后无法回退的快速解决方法

    Angular懒加载机制刷新后无法回退的快速解决方法

    今天在项目中遇到一个很奇怪的问题,使用oclazyload懒加载angular的模块,刷新页面后,单击回退按钮无法返回上一个页面.估计是使用懒加载机制销毁了angular内部的state关联,导致无法回到上一个state(单击回退按钮 ui-routre的 $stateChangeStart 事件都不会触发),当然这只是猜测,由于事件关系也没有去深入的探究源码. angular懒加载机制刷新后无法回退的解决方案 : 通过查看angular(ionic)的源码发现$browser这个服务上有个on

  • vue异步组件与组件懒加载问题(import不能导入变量字符串路径)

    vue异步组件与组件懒加载问题(import不能导入变量字符串路径)

    目录 vue异步组件与组件懒加载 错误的原因分析 解决方案一 解决方案二 vue懒加载组件 路径不对 vue异步组件与组件懒加载 在写项目的时候,需要动态配置路由菜单,所有的菜单都是通过配置生成的,这就意味着菜单的路径(在vue开发项目里面就是一个字符串的路径)需要异步加载进去,但是由于对webpack的import不是很熟悉,所以就有一下的坑需要填了 错误的原因分析 _import.js module.exports = file => () => import(file) 但是这种方法错误

  • vue组件代码分块和懒加载讲解

    目录 懒加载组件 问题与解决方案 加载中组件 错误处理组件 preload 和 prefetch 总结 前端开发中,随着业务和页面增加,以组件为基本单位的结构下,组件数量会增长极快,为了优化我们会很显然地想要进行一些工作: 代码分块 懒加载非必要资源文件 非必要资源,指的首次渲染出某页面所不必要的资源,如因为用户操作才出现的图片.弹窗等. 代码分块和懒加载在页面层面具有极大的优化作用,用户很可能只是浏览dashboard页面,可能根本就不会去看详情等页面,那我们就不必将详情页面的代码和dashb

  • vue按需加载组件webpack require.ensure的方法

    vue-cli是由vue官方发布的快速构建vue单页面的脚手架. 使用 vue-cli构建的项目,在 默认情况下 ,执行 npm run build 会将所有的js代码打包为一个整体, 打包位置是 dist/static/js/app.[contenthash].js 类似下面的路由代码 router/index.js 路由相关信息,该路由文件引入了多个 .vue组件 import Hello from '@/components/Hello' import Province from '@/c

  • vue前端性能优化之预加载和懒加载示例详解

    目录 预加载 图片预加载 JS预加载 js的加载方式 preload prefetch Preload & Prefetch 的区别 不同资源加载的优先级规则 懒加载 图片懒加载 路由懒加载 组件懒加载 最后 预加载 预加载简单来说就是将所有所需的资源提前请求加载到本地,这样后面在需要用到时就直接从缓存取资源:我们使用该技术预先告知浏览器,等下某些资源可能要被使用,先把资源下载下来,不要等使用的时候再下载,可以看出这样的加载技术会增加服务器的压力,但是用户的体验会比较好,因为可以较快的看到后面的

  • 详解vue项目优化之按需加载组件-使用webpack require.ensure

    详解vue项目优化之按需加载组件-使用webpack require.ensure

    使用 vue-cli构建的项目,在 默认情况下 ,执行 npm run build  会将所有的js代码打包为一个整体, 打包位置是 dist/static/js/app.[contenthash].js 类似下面的路由代码 router/index.js  路由相关信息,该路由文件引入了多个 .vue组件 import Hello from '@/components/Hello' import Province from '@/components/Province' import Segm

  • Vue加载组件、动态加载组件的几种方式

    什么是组件: 组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HTML元素的形式,以is特性扩展. 下面一段简单的代码给大家介绍Vue加载组件的几种方式,具体代码如下所示: //正常加载 import index from '../pages/index.vue' import view from '../pages/view.vue' //懒加载 const i

  • Vue通过懒加载提升页面响应速度

    Vue通过懒加载提升页面响应速度

    概述 项目的目的是要通过数据透视表和Excel公式来分析公司的各项运营数据.不过在集成后,在开发环境页面运行流畅,大量数据加载处理也很快.但是发布生产后,在用户每次打开页面时,加载时间上相较开发阶段均有所降低,经过排查速度变慢是由于发布包的vendor.js变大所导致的,这个文件加载每次都需300毫秒左右,由于小的Vue项目并没有做模块划分,所以所有的代码都直接打包到了vendor中,在集成了新功能后,发布包也随之变大了. 既然找到了原因,就开始着手优化,在前端对于需加载较大资源时,一般都采用懒

随机推荐