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. String和int、long、double等基本数据类型的转换

    学习目标: 掌握Java的基本数据类型与String的转换 学习内容: 1.转化规则 String 转 基本数据类型 基本数据类型 变量 = 包装类.Parse基本数据类型(String); // c ...

  2. 利用css3实现3D轮播图

    动画实现主要利用了z-index将层级关系改变,从而实现了焦点图的效果:css3属性 transform rotate 来实现图片的动画效果 .transition实现过度动画! * { margin ...

  3. python---二叉树广度优先和深度优先遍历的实现

    class Node(object): """结点""" def __init__(self, data): self.data = dat ...

  4. mysql发展历程 各分支版本溯源

    首先为什么要了解mysql的历史,了解一个软件的前生后世有时候还是很有必要,特别是对于走在架构之路或者是想深入了解一个软件的时候,在不同版本中由于进行了很多的改进或者说加入了新的功能,也有可能是软件本 ...

  5. spring data es操作es

    https://www.freesion.com/article/59481222940/

  6. 使用IntelliJ IDEA创建Java项目

    准备: Intelliyu IDEA 下载好JDK1.8 方法一: 方法二

  7. python基础练习题（题目 字母识词）

    day22 --------------------------------------------------------------- 实例031:字母识词 题目 请输入星期几的第一个字母来判断一 ...

  8. mosquitto服务器的安装以及mqtt.fx软件的使用

    一.MQTT描述 MQTT 全称为 Message Queuing Telemetry Transport(消息队列遥测传输)是一种基于发布/订阅范式的"轻量级"消息协议,由 IB ...

  9. JS_简单的效果-鼠标移动、点击、定位元素、修改颜色等

    1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="U ...

  10. [AcWIng 799] 最长连续不重复子序列

    点击查看代码 #include<iostream> using namespace std; const int N = 1e5 + 10; int a[N], s[N]; int mai ...