vue项目随着代码量、业务组件、路由页面等的丰富，出于性能要求考虑不得不使用代码分割技术实现路由和组件的懒加载，这看似没什么问题

当每次通过npm run build构建生产包并部署到服务器后，操作页面就经常会遇到点击无反应、路由已跳转但页面没动静或页面错乱等情况，此时打开控制台会看到报错信息Error: Loading chunk * failed.当我们尝试刷新页面后一切恢复正常，这是因为每次npm run build之后，打包文件的文件名hash值&模块ID发生变化，浏览器缓存的文件与服务器上的文件不一致导致模块加载失败

解决方案：

可以配置打包脚本，给打包文件的文件名加上时间戳，避免浏览器的缓存

build/webpack.prod.conf.js

vue.config.js

然后vue-router提供了路由错误处理函数onError，捕获路由跳转时发生的错误，可以捕获到异步动态组件加载失败的错误，做相应处理

vue项目经常遇到的Error: Loading chunk * failed的更多相关文章

  1. [vue-router] Failed to resolve async component default: Error: Loading chunk 0 failed.

    在整合laravel5.4 和vue2.1的时候遇到一个奇怪的问题 Uncaught SyntaxError: Unexpected token < Error: Loading chunk 0 ...

  2. Vue-cli3.x在开发环境中(router采用 history模式)出现Failed to resolve async component default: Error: Loading chunk {/d} failed.或者Uncaught SyntaxError: Unexpected token <错误

    使用Vue-cli3.x开发环境中(router采用 history模式)出现Failed to resolve async component default: Error: Loading chu ...

  3. Vue打包后放到服务器出现Loading chunk {n} failed 错误

    导航栏点击切换时 会出现Loading chunk {n} failed  ,刷新之后便不会出现.而且n在最新的build的文件中,n没有存在 偶然一次发现,项目更新迭代开发时上传测试环境后就会出现, ...

  4. vue项目报错，解决Module build failed: Error: Cannot find module 'node-sass' 问题

    1.报错问题 1 E:\WebStormFile\treehole-manage>npm run dev > xc-ui-pc-sysmanage@1.0.0 dev E:\WebStor ...

  5. Vue 项目启动抛出 Error/ No PostCSS Config found in

    项目启动时抛出 Error: No PostCSS Config found in … 的错误表示某个 css 文件不能被引入 解决办法: module.exports = { plugins: { ...

  6. 移动vue项目，启动错误：Module build failed: Error: No PostCSS Config found in:

    解决办法:在根目录新建postcss.config.js module.exports = { plugins: { 'autoprefixer': {browsers: 'last 5 versio ...

  7. vue项目运行报错：Module bulid failed： Error： Node Sass does not yet support your current environment

    出错起因:      从GitLab clone项目 --> 用 npm install 命令下载依赖包 --> #npm run dev,报错 错误截图: 解决方法:   思路:单独 i ...

  8. 移动端的vue项目，启动错误：Module build failed: Error: No PostCSS Config found in:

    新建一个postcss.config.js 写上下面代码 `module.exports = { plugins: { 'autoprefixer': {browsers: 'last 5 versi ...

  9. Vue项目中出现Loading chunk {n} failed问题的解决方法

    最近有个Vue项目中会偶尔出现Loading chunk {n} failed的报错,报错来自于webpack进行code spilt之后某些bundle文件lazy loading失败.但是这个问题 ...

随机推荐

  1. for循环打印九九乘法表

    学习目标: 熟练掌握 for 循环的使用 例题: 需求:打印九九乘法表 代码如下: // 九九乘法表 // row 为行,col为列 for(int row = 1; row < 10; row ...

  2. JavaScript脚本延迟加载的方式有哪些？

    延迟加载就是等页面加载完成之后再加载 JavaScript 文件. js 延迟加载有助于提高页面加载速度. 一般有以下几种方式: defer 属性: 给 js 脚本添加 defer 属性,这个属性会让 ...

  3. 时间盲注——AS别名让盲注不盲

    用处 页面存在时间盲注,注入成功了,你啥也看不到. 这只是为了能够查看到注入后的结果 网站部分源代码 <?php $conn = mysqli_("127.0.0.1",&q ...

  4. python---输出函数运行时间的装饰器

    """ 装饰器: 不改变原函数的调用方式和函数的前提下, 增加额外的功能, 其本质就是一个闭包 ---输出函数的运行时间 """ impor ...

  5. 在oracle控制台当你输入错误的时候，还不能删除，回退的解决方法

    对于回退出现^H解决方法 oracle@prd:/home/oracle$sqlplus / as sysdba SQL*Plus: Release 11.2.0.4.0 Production on ...

  6. Mycat管理

    Mycat 提供了类似数据库的管理监控方式,可以通过 mycat 端口 9066 执行相应的 SQL 语句进行管理,可以可以通过 navicat 软件进行远程连接管理,再使用 MySQL 命令行界面登 ...

  7. String类为什么被设计成不可变类

    1.享元模式: 1.共享元素模式,也就是说:一个系统中如果有多处用到了相同的一个元素,那么我们应该只存储一份此元素,而让所有地方都引用这一个元素. 2.Java中String就是根据享元模式设计的,而 ...

  8. C# 中托管内存与非托管内存之间的转换

    c#有自己的内存回收机制,所以在c#中我们可以只new,不用关心怎样delete,c#使用gc来清理内存,这部分内存就是managed memory,大部分时候我们工作于c#环境中,都是在使用托管内存 ...

  9. 一种O(n)时间复杂度的计数排序算法和Top N热词算法

    排序算法是研究非常广泛且超级经典的算法,主流排序算法的时间复杂度基本都在O(nlogn). 今天就介绍一种以hash表为基础的,时间复杂度能够达到O(n)的排序算法--计数排序: 同时基于它的思想,完 ...

  10. Azure DevOps (十一) 通过Azure Devops部署一个.NET Core WebAPI

    前几篇文章中,我们讨论了如何通过流水线实现项目的编译.上传.打包.部署等操作,今天我们来实现一套完整的流程,把之前碎片化的知识点给串起来. 本次我们使用一个ASP.NET Core的WebApi项目来 ...