前端发版自动刷新页面

1.原因

• 每次前端发版，由于用户没有刷新页面，所以浏览器本地的代码是旧版的，无法及时获取最新版本
• 此时可以通过维护一个版本编号，并根据编号确认前端是否发版来进行页面刷新

2.配置

2.1 封装版本维护代码

// 获取版本、更新版本 version-watch.js
const fs = require("fs");
const path = require("path");
const packageUrl = path.resolve(process.cwd(), "./package.json");
/**
 *
 * @returns 获取package数据
 */
function getPackageJson() {
  const data = fs.readFileSync(packageUrl);
  return JSON.parse(data);
}

/**
 * 更新版本
 */
function updateVersion() {
  let packageJson = getPackageJson();

  const time = new Date();
  let year = time.getFullYear();
  let month = time.getMonth() + 1;
  let day = time.getDate();
  let hour = time.getHours();
  const min = time.getMinutes();

  if (month < 10) month = "0" + month;
  if (day < 10) day = "0" + day;
  if (hour < 10) hour = "0" + hour;
  year = year - 2000;
  packageJson.version = "2." + year + "." + month + day + hour + min;

  fs.writeFile(packageUrl, JSON.stringify(packageJson, null, "\t"), err => {});
}

module.exports = {
  getPackageJson,
  updateVersion
};

// 版本判断/刷新页面 version-reload.js
const { MessageBox } = require("element-ui");

/**
 * 判断版本
 */
const VERSION_KEY = "VERSION";

export function isUpdateVersion() {
  return new Promise((resolve, reject) => {
    const currentVersion = VERSION;
    const localVersion = window.localStorage.getItem(VERSION_KEY) || "";
    if (!localVersion || currentVersion !== localVersion) {
      window.localStorage.setItem(VERSION_KEY, currentVersion);
      MessageBox.alert("当前版本已更新，请刷新页面", "版本更新提示", {
        confirmButtonText: "确定",
        type: "warning",
        showClose: false
      }).then(() => {
        window.history.go(0);
      });
      resolve(false);
    } else {
      resolve(true);
    }
  });
}

// webpack配置
const { getPackageJson } = require("./src/config/version-watch");
// 变量注入
  plugins: [
      new webpack.DefinePlugin({
        VERSION: JSON.stringify(getPackageJson().version)
      })
    ],

// 打包配置  ./src/config/index.js
const { updateVersion } = require("./version-watch");

updateVersion();


// package.json
{
  "version": "2.23.09181447",
  "scripts": {
    "dev": "npm run version && vue-cli-service serve",
    "build:prod": "npm run version && vue-cli-service build",
    "build:dev": "npm run version && vue-cli-service build --mode development",
    "version": "node ./src/config/index.js"
  },
}

3.使用

• 可以在页面入口处使用轮询判断版本
• 在接口调用处判断

// 这里采用接口处调用
import { isUpdateVersion } from "@/config/version-reload.js";

 instance.interceptors.request.use(
    config => {
        isUpdateVersion();
    }
 )

4.发版效果