设置打包 version 自动更新设置打包自动更新版本号 1、下载 release 包， 2、配置命令在 build\

设置打包自动更新版本号

1、下载 release 包，

npm i standard-version

2、配置命令

在 build\index.js 内设置 build 打包所需命令，例如删除原数据，压缩文件等等操作，具体如下

其中 js 调用 run 命令使用了两种方法，

1、使用 runjs 中的 run 方法，直接调用命令

2、使用 node.js 中的 child_process 模块调用系统命令

// index.js

// 需要打包成zip的环境集合,用于区分环境
const buildZipEnvs = ["xxx", "xxx", "xxx"];

const fs = require("fs"); //文件模块
const path = require("path"); //系统路径模块

const zipFile = require("compressing");
const chalk = require("chalk");
const config = require("../vue.config.js");
const rawArgv = process.argv.slice(2);

//	获取当前环境，当然得你的项目进行区分配置
const args = rawArgv.join(" ") || '';

//	获取 build 指令所打包的环境
const buildEnv = rawArgv.slice(-1)[0];

const connect = require("connect");
const serveStatic = require("serve-static");

//	使用 node.js 中的 child_process 模块调用系统命令
const { exec } = require("child_process");
const { run } = require("runjs");

const version = (+new Date()).toString(32).slice(-5);

const routeString = "文件路径";

const buildHandler = async () => {
  deleteFileSync(routeString);
  deleteFileSync(routeString);
  console.log(chalk.yellow(`>开始打包${args}, version:${version}`));

  // 若 npm run build 为现网环境则直接升级版本号，并进行打包，
  if (buildEnv == "现网环境") {
    //	输入现网环境打包命令，先进性 git pull 拉去代码
    await gitPullApi();

    //	调用 npm run release 生成一个新的版本号，并打上对应的 rag 然后提交
    await automaticVersion();
  }

  // 修改打包版本号
  await basicPackaging();

  run(`vue-cli-service build ${args}`);
  console.log(
    chalk.green(
      `> 打包成功 (${version} --${buildEnv}) ${path.join(
        __dirname,
        `../${config.outputDir}`
      )}`
    )
  );

  basicPackaging("clear");
  // 更新版本信息
  console.log(chalk.green(`> 开始压缩`));
  zipFile.zip.compressDir(routeString, routeString).then((res) => {
    const filePath = path.join(__dirname, routeString);
    console.log(
      chalk.green(`> 成功压缩(${version} --${buildEnv}) ${filePath}`)
    );
  });
};

/**
 * 删除文件
 * filePath 文件路径，参数可以是文件或文件夹
 */
function deleteFileSync(filePath) {
  filePath = path.join(__dirname, filePath);
  console.log(chalk.yellow(`>删除 ${filePath}`));
  // 检测文件是否存在
  if (fs.existsSync(filePath)) {
    // 检测文件是目录
    if (fs.statSync(filePath).isDirectory()) {
      // 获取目录内所有文件名
      const filenames = fs.readdirSync(filePath);
      filenames.forEach((filename) => {
        const currentPath = path.join(filePath, filename);
        if (fs.statSync(currentPath).isDirectory()) {
          deleteFileSync(currentPath);
        } else {
          fs.unlinkSync(currentPath);
        }
      });
      fs.rmdirSync(filePath);
    } else {
      fs.unlinkSync(filePath);
    }
  }
  console.log(chalk.green(`>${filePath} 删除成功`));
  return true;
}

//	自定义更新版本
const basicPackaging = (type = "update") => {
  return new Promise((resolve) => {
    exec("git config user.name", "utf8", (err, stdout) => {
      const author = err ? "" : stdout;
      // 写入version信息
      const versionStr = JSON.stringify({
        version: version,
        date: new Date().toLocaleString(),
        author,
      });
      const writePath = "./public/version.json"; //config.outputDir +"/version.json"
      fs.writeFile(writePath, type === "update" ? versionStr : "{}", () => {
        type === "update" &&
          console.log(chalk.green(`> 版本信息更新成功 (${versionStr}`));
        resolve();
      });
    });
  });
};

const gitPullApi = (source) => {
  return new Promise((resolve, reject) => {
    exec("git pull", (error, stdout, stderr) => {
      if (error) {
        console.error(`执行错误: ${error}`);
        reject();
      }
      // 输出结果
      console.log(stdout, "++++++++==");
      resolve();
    });
  });
};

// 生成一个新的版本号;
const automaticVersion = () => {
  return new Promise((resolve, reject) => {
    exec("npm run release", (error, stdout, stderr) => {
      if (error) {
        console.error(`执行错误：${error}`);
        reject();
      }
      console.log(stdout); // 输出结果
      resolve();
    });
  });
};

buildHandler();

3、引入配置项

在 package.json 文件内引入 build/index.js 文件 + 引入 standard-version 包

 "scripts": {
    "dev": "vue-cli-service serve",
    "build": "node build/index.js --mode production",
 	"build:test": "node build/index.js --mode test",
    "release": "standard-version"
  },

当以上步骤完成，就可完成自动更新打包版本号 + 压缩文件，接下来进行最总要的一步，

4、自动刷新

在路由拦截器内获取当前版本号，并且和过去版本比较，若不一直清除缓存，刷新页面

4.1：获取版本号方法

//  xxxapi.js

import { post, get } from "@/utils/request";
import axios from "axios";

let timer = 0;
export const getVersionInfo = () => {
  // 区分环境，若是本地环境则不校验
  if (process.env.NODE_ENV === "本地环境") return;
  
  const nowTime = +new Date();
  if (nowTime - timer <= 2000) return;
  timer = nowTime;
  //  调用 打包时创建的 josn 文件，读取数据信息，获取数据
  axios.get("version.json?t=" + +new Date()).then(({ data }) => {
    // 判断本地是否有版本信息 如果有 并且跟返回的不一致 则刷新页面
    const versionStr = JSON.stringify(data);
    const oldVersionInfo = localStorage.getItem("version") || "{}";
    if (oldVersionInfo !== versionStr) {
      localStorage.setItem("version", versionStr);
      if (JSON.parse(oldVersionInfo)?.version) {
        console.log(data, "版本信息不一致,需要刷新页面");

        location.replace(location.href);
        location.reload(true);
      }
    }
  });
};

4.2：在路由拦截器内调用方法

// 	路由拦截器
import { getVersionInfo } from "xxxapi.js";

......
// 其他拦截器代码
......

// 判断有无 token
if ( token ) {
	getVersionInfo()
}

设置打包 version 自动更新