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. Python入门-常用模块

    1.sys,os import sys import os #获取当前的路径 print(sys.path[0]) print(os.getcwd()) print(os.path.abspath(& ...

  2. Pinpoint介绍及docker安装方式

    一.介绍 Pinpoint是用Java编写的大型分布式系统的APM(Application Performance Management应用程序性能管理)工具,受Dapper论文的启发,Pinpoin ...

  3. 不仅仅是一把瑞士军刀 —— Apifox的野望和不足

    声明:本文内容不涉及任何 Apifox 的功能介绍,一来网上这方面的文章已经汗牛充栋,二来 Apifox 本身的用户体验做的非常好,对于开发者而言学习成本基本为零. 阮一峰:不管你是前端开发还是后端开 ...

  4. vwware workstation虚机网络配置NAT

    1.在编辑中选择虚拟网络编辑器,新增NAT模式网络适配器,如下图: 2.在虚拟机中选择设置,在网络适配器中自定义为上一步配置的网络适配器,如下图: 3.进入虚拟机后,编辑/etc/sysconfig/ ...

  5. 2021.07.23 P2474 天平（差分约束）

    2021.07.23 P2474 天平(差分约束) [P2474 SCOI2008]天平 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 题意: 已知A,B和每两个点点权,求点权i, ...

  6. Python图像处理丨OpenCV+Numpy库读取与修改像素

    摘要:本篇文章主要讲解 OpenCV+Numpy 图像处理基础知识,包括读取像素和修改像素. 本文分享自华为云社区<[Python图像处理] 二.OpenCV+Numpy库读取与修改像素> ...

  7. day01-从一个基础的socket服务说起

    首发地址:day01-从一个基础的socket服务说起 教程说明:C++高性能网络服务保姆级教程 本节目的 实现一个基于socket的echo服务端和客户端 服务端监听流程 第一步:使用socket函 ...

  8. 论文解读（DAGNN）《Towards Deeper Graph Neural Networks》

    论文信息 论文标题:Towards Deeper Graph Neural Networks论文作者:Meng Liu, Hongyang Gao, Shuiwang Ji论文来源:2020, KDD ...

  9. 8 种常见 SQL 错误用法

    点击上方"开源Linux",选择"设为星标"回复"学习"获取独家整理的学习资料! 1.LIMIT 语句 分页查询是最常用的场景之一,但也通常 ...

  10. 关于前端ajax请求获取数据成功之后无法操作数据的原因及解决方法

    前言:做项目的时候我用ajax请求json数据,遍历使用数据时却发现页面无响应.关于这个问题今天有个朋友又问了我一次,记录一下.由于我没有记录,这里用我朋友的图片. 代码现象: 这里他是使用alert ...