背景

用户反应菜单偶发出现点击无反应现象。查看console报ChunkLoadError:Loading chunk * failed错误。

image.png

分析

根据报错的文件，右击在新标签页面查看代码，发现服务器上无此文件。所以导致报错。

查看服务器代码

感觉是缓存问题，项目更新后，请求旧的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。

总结

问题一开始出现的时候，无思路。尤其是菜单点击偶然出现。很难复现。我在本地测试了一天，都没出现。
百度搜索，看各种原因。然后冷静分析。因为不好测试。只能是打包一次，看一次情况。花费时间也比较多。但是越是这样的问题，越应该冷静下来，一点点尝试。多分析，多测试，一定能找到解决办法。
问题比较棘手的时候，还会有情绪的烦恼。可是技术本来就是这样，应该为了追求技术而深入思考。这种问题才是每天的增删查改中的一朵靓丽的花。