vite项目发版后自动清理缓存

vite项目发版后自动清理缓存

打包时自动更新版本号插件

import ChildProcess from "child_process";
import path from "path";
import fsPromises from "fs/promises";
import type { Plugin } from "vite";
import { promisify } from "util";

async function execGit(gitWorkTree: string | undefined, cmd: string) {
  const { exec } = ChildProcess;
  const execPromise = promisify(exec);
  const gitBaseCommand = gitWorkTree
    ? `git --git-dir=${path.join(gitWorkTree, ".git")} --work-tree=${gitWorkTree}`
    : "git";
  try {
    const { stdout } = await execPromise(`${gitBaseCommand} ${cmd}`);
    return stdout.trim().replace(/[\s\r\n]+$/, "");
  } catch (error) {
    console.error(error);
    return `Error executing git command`;
  }
}

export default function vitePluginVersionFromGit(): Plugin {
  let config: any = {};
  return {
    name: "vite-plugin-version-from-git",
    async config() {
      const branch = await execGit(undefined, "rev-parse --abbrev-ref HEAD");
      const tag = await execGit(undefined, "describe --tags --abbrev=0");
      const commitHash = await execGit(undefined, "rev-parse --short HEAD");
      const commitMessage = await execGit(undefined, "log -1 --format=%s");
      let commitDate = await execGit(undefined, "log -1 --pretty=%cI");
      if (commitDate.includes("+")) {
        commitDate = commitDate
          .split("+")[0]
          .replaceAll("T", "")
          .replaceAll("-", "")
          .replaceAll(":", "");
      }
      config = {
        GIT_BRANCH: branch,
        GIT_TAG: tag,
        GIT_COMMIT_HASH: commitHash,
        GIT_COMMIT_MESSAGE: commitMessage.replace(/[\s\r\n]+$/, ""),
        GIT_COMMIT_DATE: commitDate,
        define: {
          RELEASE_VERSION: `"${tag}-${commitHash}-${commitDate}"`
        }
      };
      return config;
    },
    async closeBundle() {
      const output = config.build?.outDir ?? "dist";
      const distDir = path.resolve(output);
      const configPath = path.resolve(distDir, "platform-config.json");
      try {
        if (
          !(await fsPromises
            .access(distDir)
            .then(() => true)
            .catch(() => false))
        ) {
          await fsPromises.mkdir(distDir, { recursive: true });
        }
        let cfg: Record<string, any> = {};
        if (
          await fsPromises
            .access(configPath)
            .then(() => true)
            .catch(() => false)
        ) {
          const content = await fsPromises.readFile(configPath, "utf-8");
          cfg = content ? JSON.parse(content) : {};
          cfg.version = config.define.RELEASE_VERSION.replaceAll('"', "");
          cfg.external = config.GIT_COMMIT_MESSAGE;
          await fsPromises.writeFile(
            configPath,
            JSON.stringify(cfg, null, 2),
            "utf-8"
          );
        }
      } catch (error) {
        console.error(error);
      }
    }
  };
}

打包配置修改

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import vitePluginVersionFromGit from './vitePluginVersionFromGit';

export default defineConfig({
  plugins: [vue(), vitePluginVersionFromGit()],
});

路由钩子检查版本

function checkHasVersion(): boolean {
  return new Promise(resolve => {
    if (!RELEASE_VERSION) {
      resolve(false);
      return;
    }
    const { VITE_PUBLIC_PATH } = import.meta.env;
    axios.get(`${location.origin}${VITE_PUBLIC_PATH}config.json`)
      .then(res => {
        resolve(res.version !== RELEASE_VERSION);
      })
      .catch(() => {
        resolve(false);
      });
  });
}
router.afterEach(() => {
  checkHasVersion().then(flag => {
    if (!flag) {
      return;
    }
    if (window.confirm('检测到新版本,是否更新?')) {
      window.sessionStorage.clear();
      window.localStorage.clear();
      window.location.reload(true);
    }
  });
});

html不缓存

<!-- html页面添加meta -->
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="expires" content="0">

# nginx配置修改
location = /index.html {
	add_header Cache-Control "no-cache, no-store";
}
location = /config.json {
	add_header Cache-Control "no-cache, no-store";
}
location ~* .(css|js|png|jpg|jpeg|gif|gz|svg|mp4|ogg|ogv|webm|htc|xml|woff)$ {
	access_log off;
	expires 30d;
	add_header Cache-Control "public, max-age=2592000";
}