web项目重新部署后提示用户获取最新版本

前言

对于web项目，每次迭代发版后，都需要用户手动刷新获取最新版本，会出现由于用户不是使用最新版本导致的问题，增加了沟通成本，于是如何让用户被动检测到版本有更新迫在眉睫。

思路

大致思路是通过本地的版本号与远程的版本号做对比，判断是否相等，若不相等则提示用户更新。
可以使用轮询，但个人觉得轮询比较浪费资源，所以放在了切换路由的时候触发。

（一）version.js

把当前的版本号写进一个json文件里

const fs = require("fs"); // 引入文件模块
const Timestamp = new Date().getTime();
fs.writeFile("./version.json", '{"version":' + Timestamp + "}\n", function(
  err
) {
  if (err) {
    return console.log(err);
  }
});

（二）package.json

执行命令，每次重新打包都会更新版本号

"build": "node version.js && node build/build.js",

（三）监听路由 router.js

router.afterEach(async (to, form) => {
  const checkVersion = await store.dispatch("checkVersion");
  if (!checkVersion) {
    // 获取的版本号不等时
    this.$confirm("检测到系统有更新, 是否获取最新版本?", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning"
    })
      .then(() => {
        window.location.reload(); // 版本不同 刷新 获取最新版本
      })
      .catch(() => {
        this.$message({
          type: "info",
          message: "已取消更新"
        });
      });
  }
});

（四）store.js

判断版本号是否一致

  actions: {
    checkVersion({ commit, state }) {
      return new Promise(resolve => {
        Axios.get("/version.json?v=" + new Date().getTime(), {
          headers: { "Cache-Control": "no-cache" },
          baseURL: window.location.origin
        })
          //禁止缓存，要请求到最新的json文件的内容
          .then(res => {
            const version = res.version;
            const clientVersionFile = require("../../version.json");
            const clientVersion = clientVersionFile.version;
            resolve(version === clientVersion);
          });
      });
    }
  }

注意事项

值得一提的是，如果只按照上面的步骤，大概率会发现请求远程的版本号文件 http://xxxxx/version.json为404，因为webpack打包后的文件并没有version.json。所以这里要在每次打包完之后，把version.json文件拷贝到dist目录下。

（方法一）

安装 CopyWebpackPlugin 插件

作用：将已存在的单个文件或整个目录复制到构建目录、用于部署文件的插件。

npm i copy-webpack-plugin -D

引入插件

const CopyPlugin = require("copy-webpack-plugin")

配置：会被打包在dist文件夹下

new CopyPlugin([{
    from: 'version.json',
    to: 'version.json'
}]),

（方法二）

创建拷贝文件脚本 copyFile.js

var fs = require("fs");
var path = require("path");

let from = path.join(__dirname, "../version.json"); // 源文件路径
let to = path.join(__dirname, "../dist/version.json"); // 目标文件路径
function copyIt(from, to) {
  fs.writeFileSync(to, fs.readFileSync(from));
}
copyIt(from, to);

更改package.json命令

"build": "node src/version.js && vue-cli-service build && node src/copy.js",