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. Oracle中between 和 in

    select * from test_s where id between 2 and 12; between 就是左右全闭区间. SELECT columnsFROM tablesWHERE col ...

  2. Java 将Map按Value值降序排列

    1 /** 2 * 将集合按照降序排列-FLOAT 3 * @param nowPartTwoData 4 * @return 5 */ 6 private static List<Map.En ...

  3. Input的校验表达式

    1.只是不能输入空格 <input type="text" onkeyup="this.value=this.value.replace(/^ +| +$/g,'' ...

  4. CVE-2022-22947 SpringCloud GateWay SpEL RCE

    CVE-2022-22947 SpringCloud GateWay SpEL RCE 目录 CVE-2022-22947 SpringCloud GateWay SpEL RCE 写在前面 环境准备 ...

  5. c++对c的拓展_指针的引用

    套用引用公式:Type & ref =val; 假设:type 类型为int * 由公式得 int * & ref = val; // int * *const ref=&va ...

  6. python---选择排序的实现

    选择排序 思想 ​ 一趟遍历记录最小的数, 放到第一个位置 ​ 再一趟遍历记录剩余列表中最小的数, 继续放置 关键点: ​ 无序区: 第i趟, 无序区为 i~n-1 ​ 最小数的位置 import r ...

  7. MySQL---增删改查数据库、表、记录

    对库的操作 # 增 create database db1 charset utf8; # 删 drop database db1; # 改 alter database db1 charget gb ...

  8. .NET 6 史上最全攻略

    欢迎使用.NET 6.今天的版本是.NET 团队和社区一年多努力的结果.C# 10 和F# 6 提供了语言改进,使您的代码更简单.更好.性能大幅提升,我们已经看到微软降低了托管云服务的成本..NET ...

  9. Oracle双字段约束

    Oracle里有unique约束,意思是该字段唯一. 但如果是两个字段呢? 比如说一个会员等级表 ID NAME POINT DISCOUNT PRIVILEGE MID 1019 普通会员 0 10 ...

  10. OpenHarmony 3.1 Release版本发布

    OpenHarmony 3.1 Release 版本概述 当前版本在OpenHarmony 3.1 Beta的基础上,更新支持以下能力: 标准系统基础能力增强 本地基础音视频播放能力.视频硬编解码.相 ...