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. 解决vue安装时出现vue --version或vue不是内部命令的问题

    1. 试图全局配置 vue 的环境变量,找到 vue.cmd 的路径,然后进行配置. 问题:在文件搜索中,没有找到 vue.cmd,失败. 1.npm i npm -g 全局 update 了 npm ...

  2. 将base64转成File文件对象

    function dataURLtoFile(dataurl, filename) { //将base64转换为文件        var arr = dataurl.split(','),      ...

  3. ThinkCMF[仿骑呗共享单车官网]

    学习Thinkcmf内容管理系统(Thinkphp3.2.3框架)时候,用来练手的,简单的模仿骑呗官网首页,并对后台管理做了点小修改. 安装: 下载地址:https://pan.baidu.com/s ...

  4. Make-learning

    Make学习笔记 make是工具,Makefile是指导make工作的文件,而CMake则是生成Makefile的工具 要点: 终极目标是Makefile里面的第一个规则目标 目标下面的命令必须接的是 ...

  5. BlockingCollection实现生产者消费者

    很简单的代码,看注释 class Program { private static ManualResetEvent _manualResetEvent = new ManualResetEvent( ...

  6. [ Vim ] 自动重载文件

    https://www.cnblogs.com/yeungchie/ 手动重载 :e 或者 :! 自动重载 set autoread 一般情况下,vim 切换缓冲区或者重新聚焦的时候会触发重载. 如果 ...

  7. kubectl creat -f 创建pod时出错

    如果创建yaml时候,sts中已经存在,但是get pod又查不到已经启动的pod可以这样 [root@k3master src]# kubectl get pod //查不到eureka NAME ...

  8. Linux磁盘之inode

    什么是 inode ? 文件储存在硬盘上,硬盘的最小存储单位叫作"扇区"(Sector).每一个扇区储存512字节(至关于0.5KB).操作系统读取硬盘的时候,不会一个个扇区地读取 ...

  9. AOT和单文件发布对程序性能的影响

    前言 这里先和大家介绍一下.NET一些发布的历史,以前的.NET框架原生并不支持最终编译结果的单文件发布(需要依赖第三方工具),我这里新建了一个简单的ASP.NET Core项目,发布以后的目录就会像 ...

  10. 新华三Gen10服务器ilo5中刷新bios固件

    新华三Gen10服务器ilo5中刷新bios固件. 当前bios1.42 已经是最新了. 固件下载后解压缩. 选择刷新固件. 点击浏览.flash文件. 点击flash 点击ok确认 开始上传 刷新进 ...