背景
用户反应菜单偶发出现点击无反应现象。查看console报ChunkLoadError:Loading chunk * failed错误。
分析
根据报错的文件，右击在新标签页面查看代码，发现服务器上无此文件。所以导致报错。
感觉是缓存问题，项目更新后，请求旧的js，报的问题。可是为什么请求旧的js呢，服务器已经更新至最新，js文件名都是通过hash处理过的，文件不存在缓存问题。怎么还会请求旧的js呢。
原因是用户页面一直打开着，不曾刷新页面。然后直接开始操作。
这也就解释了为啥是偶然的。
解决方案
第一种：运用vue-router的错误处理函数 onError 捕获错误
/* 路由异常错误处理，尝试解析一个异步组件时发生错误，重新渲染目标页面 */
router.onError((error) => {
const pattern = /Loading chunk (\d)+ failed/g;
const isChunkLoadFailed = error.message.match(pattern);
const targetPath = router.history.pending.fullPath;
if(isChunkLoadFailed){
router.replace(targetPath);
}
})
参考链接：ChunkLoadError:Loading chunk * failed
参考链接：Vue打包后放到服务器出现Loading chunk {n} failed 错误的解决办法
第二种：实现前端代码部署后，能够自动刷新用户页面。
原理：
写：代码打包的时候生成版本信息。通过node写文件到public文件下。
读：页面在切换路由的时候，读版本信息，判断是否一致。不一致则刷新页面。
两种方法本质上都是重新刷新页面，加载到最新的就行。区别是第一种是捕捉到错误的时候刷新。第二种要提前一点可以是路由切换的时候刷新，（也可以监听visibilitychange事件做刷新）
代码实现
基于vue2.0实现，按照第二种方案解决
写文件：采取打包的时候，写一个webpack插件的方式，生成版本文件。
vue.config.js
const VersionPlugin = require('./plugins/version_plugin')
const Timestamp = new Date().getTime();
process.env.VUE_APP_VERSION = 'v' + Timestamp // 版本格式
module.exports = {
....
configureWebpack: (config) => {
if (process.env.NODE_ENV !== "development") {
config.plugins.push(new VersionPlugin({
path: resolve(""),
env: process.env,
versionDirectory: 'public'
}));
}
},
}
version_plugin.js 可以写一版class语法的。
'use strict'
let FStream = require('fs')
/**
* 每次发布生成版本信息插件
* @param {*} options
*/
function VersionPlugin(options) {
this.options = options || {}
!this.options.versionDirectory && (this.options.versionDirectory='public')
}
// apply方法是必须要有的，因为当我们使用一个插件时（new somePlugins({})），webpack会去寻找插件的apply方法执行
VersionPlugin.prototype.apply = function (compiler) {
let self = this
// compiler.plugin('emit', function (params) {
// })
compiler.plugin('done', function (stats) {
console.log('应用编译完成')
})
// 生成版本信息文件路径
// this.options.path：项目的绝对路径
let dir_path = self.options.path + '/' + self.options.versionDirectory
let version_file = dir_path + '/version.json'
let content = `{"version":"${self.options.env.VUE_APP_VERSION}"}`
//判断是否存在文件
FStream.access(dir_path, function (err) {
if (!err) {
// 写文件
writeVersion(self,version_file,content)
return
}
FStream.mkdir(dir_path, function (err) {
if (err) throw err
console.log('\n创建目录[' + dir_path + ']成功')
//写文件
writeVersion(self,version_file,content)
})
})
}
const writeVersion = (self, versionFile, content) => {
console.log('\n当前版本号：' + self.options.env.VUE_APP_VERSION)
console.log('开始写入版本信息...')
FStream.writeFile(versionFile, content, function (err) {
if (err) throw err;
console.log('版本信息写入成功')
})
}
module.exports = VersionPlugin
读文件：路由守卫中进行判断
router.beforeEach((to, from, next) => {
// 直接先跳转。若先判断版本再跳转，反应有点慢。所以直接跳转。版本不对，再刷新
next();
try {
// 开发模式下，不做此项判断。有热更新一直在刷新
if (process.env.NODE_ENV != "development") {
// 版本监控
fetch(`/version.json?v=${Date.now()}`).then((res) => {
if (res.status === 200) {
return res.json()
} else {
return null
}
}).then((data: any) => {
if (data && process.env.VUE_APP_VERSION != data.version) {
// Message 可以看用的是什么组件，引入到这里即可用
(Message as any).info("发现新内容，自动更新中...");
window.location.reload()
}
})
}
} catch (err) {
console.log(err)
}
});
生成的文件：version.json
{"version":"v1692342379105"}
参考链接:在Vue开发中解决加载#chunk#问题失败
参考链接:html设置Cache-Control：no-cache/ no-store来禁止页面缓存，不起作用
参考链接:监控前端代码版本迭代实现页面自动刷新
参考链接:Vite实现版本更新检查，实现页面自动刷新
参考链接:如何优雅的实现前端版本投产自动触发浏览器刷新更新版本内容
遇到的问题
1.process.env.version 定义的变量取不到值。原因是：vue-cli官网有写，要求定义的全局变量必须VUE_APP_开头。所以更改为process.env.VUE_APP_VERSION。
总结
问题一开始出现的时候，无思路。尤其是菜单点击偶然出现。很难复现。我在本地测试了一天，都没出现。
百度搜索，看各种原因。然后冷静分析。因为不好测试。只能是打包一次，看一次情况。花费时间也比较多。但是越是这样的问题，越应该冷静下来，一点点尝试。多分析，多测试，一定能找到解决办法。
问题比较棘手的时候，还会有情绪的烦恼。可是技术本来就是这样，应该为了追求技术而深入思考。这种问题才是每天的增删查改中的一朵靓丽的花。
