携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第2天，点击查看活动详情

关于新项目发版

最近在做一个新项目，做的过程中，遇到发版后，页面点不动的问题。打开控制台，发现报错如下：

原因

出现这个问题的原因：之前没有访问过的页面，会报错，因为没有缓存过对应hash的js和css文件，然后也加载不到新的，所以就报错了

解决思路如下：

方案一：如果不做处理，用户强制刷新页面可解决。但这种方案，尤其在发版频繁的前期，用户得气死
方案二：发版后页面自动刷新，给友好提示

详细解决方案

每次打包时生成新的版本号

其实就是在webpack编译过程中增加插件

    const fs = require('fs')
    VersionPlugin.prototype.apply = function (compiler) {
      var that = this;
      compiler.plugin('compile', function () {
        // 生成版本信息文件路径
        var dir_path = that.options.context + '/' + that.options.versionDirectory;
        var version_file = dir_path + '/version.json';
        const timestamp = 'v' + new Date().getTime()
        const content = '{"version":"' + timestamp + '"}';
        fs.exists(dir_path, function (exist) {
          if (exist) {
              fs.writeFile(that, version_file, function (err) {
                if (err) throw err;
                console.log('版本信息写入成功！');
              });
            return;
          }
          fs.mkdir(dir_path, function (err) {
            if (err) throw err;
            fs.writeFile(that, version_file, function (err) {
                if (err) throw err;
                console.log('版本信息写入成功！');
              });
          });
        });
      });
    };

在第一次加载页面时请求一次version.json文件，并存储在state中

在某个触发点监听版本变化（路由切换/接口请求/错误监控），我们选择了错误监控

在main.js中对错误信息进行监控

Vue.config.errorHandler = error => {
  handlerError({ error, errorType: 'errorHandler' })
}
Vue.prototype.$throw = (error) => handlerError({ error, errorType: 'throw' })
window.onunhandledrejection = error => handlerError({ error, errorType: 'unhandledrejection' })
window.onerror = error => handlerError({ error, errorType: 'onError' })

在错误处理中请求version.json文件，每次出现错误，对比存储的值和当前请求值，如果不同，则弹窗友好提示刷新页面

const handlerError = ({ error, errorType }) => {
  if (process.env.NODE_ENV === 'development') return
  store.dispatch('/getVersion').then(res => {
    if (store.state.user.version && (res.version !== store.state.user.version)) {
      MessageBox.alert('发现新版本，自动更新中', '提示', {
        confirmButtonText: '我知道了',
        type: 'warning',
        callback: action => {
          window.location.reload(true)
        }
      })
    }
  })
}

怎么回事？发版后页面点不动了

关于新项目发版

原因

详细解决方案