const fs = require('fs');
const path = require('path');
const cheerio = require('cheerio');
const packageJson = require('../package.json');


class VersionPlugin {
  constructor(params) {
    this._version = new Date().getTime(); // 版本时间
    this._name = params?.name || 'dist'; // 打包目录
    this._subName = params?.subName || packageJson.name // 前缀
  }
  apply(){
    try {
      const filePath = path.resolve(`./${this._name}/version.json`);
      // 1. version.json
      fs.writeFileSync(filePath, JSON.stringify({
        version: this._version,
      }, null, 2));
      // 2. index.html
      const htmlPath = path.resolve(`./${this._name}/view.html`);
      const data = fs.readFileSync(htmlPath);
      const $ = cheerio.load(data);
      $('body').append(`<div id="${this._subName}-versionTag" style="display: none">${this._version}</div>`);
      fs.writeFileSync(htmlPath, $.html());
    }catch (err) {
      console.log(err);
    }
  }
}


new VersionPlugin().apply()

<template>
  <div>

  </div>
</template>
<script>
import moment from 'moment'
export default {
  name: 'checkVersion',
  data(){
    return {
      expireMinutes: 1,
      timer: null,
    }
  },
  methods: {
    visibleFn(e) {
      if(document.visibilityState === 'visible'){
        this.fetchVersion();
      }
    },
    compireVersion(latestVersion, currentVersion){
      console.log(latestVersion, currentVersion)
      try {
        if (latestVersion && currentVersion && latestVersion > currentVersion) {
          // 提醒过了就设置一个更新提示过期时间，一天内不需要再提示了，弹窗过期时间暂时全局只需要一个！！
          localStorage.setItem(`versionUpdateExpireTime`, moment().endOf('day').format('x'));
          this.notify()
        }
        // 设置下次比较时间
        localStorage.setItem(`versionInfoExpireTime`,  moment().add(this.expireMinutes, 'minutes').format('x'));
      }catch (e) {
        console.log(e)
      }
    },
    routerFn(e) {
      console.log('popstate', e)
    },
    notify(){
      this.$notify({
        title: '版本更新提示',
        dangerouslyUseHTMLString: true,
        position: 'bottom-right',
        message: `您已经长时间未使用此页面，在此期间平台有过更新，如您此时在页面中没有填写相关信息等操作，请点击刷新页面使用最新版本！ <br/>
  <div style="display: flex; justify-content: space-between">
    <div></div>
    <button type="button" class="el-button el-button--primary el-button--mini" onclick="refresh()">
    刷新
</button>
</div>
`,
      });
    },
    fetchVersion(){
      /**
       *
       * @desc 为了防止打扰，版本更新每个应用 10分钟提示
       */
      // if (Number(localStorage.getItem(`versionUpdateExpireTime`) || 0) >= new Date().getTime()) {
      //   return;
      // }
      /**
       * @desc 不需要每次切换页面都去判断资源，每次从服务器获取到的版本信息，给半个小时的缓存时间，需要区分子应用
       */
      if (Number(localStorage.getItem(`versionInfoExpireTime`) || 0) > new Date().getTime()) {
        return;
      }
      const dom = document.getElementById('versionTag');
      if(dom){
        const currentVersion = Number(dom.innerText) || undefined;
        fetch(`/version.json?timestamp=${new Date().getTime()}`).then(res=>{
          if(res.status==200){
            return res.json();
          }
        }).then(res=>{
          if(Reflect.has(res, 'version')){
            const latestVersion = res.version;
            this.compireVersion(latestVersion, currentVersion);
          }
        })
      }
    },
  },
  destroyed() {
    document.removeEventListener('visibilitychange', this.visibleFn);
    window.removeEventListener('popstate', this.routerFn);
    if(this.timer){
      window.clearInterval(this.timer)
    }
  },
  mounted() {
    this.fetchVersion();
    window.refresh = ()=>{
      window.parent.location.reload();
    }
    this.timer = setInterval(()=>{
     this.fetchVersion();
    }, 1000*60*this.expireMinutes)
    document.addEventListener('visibilitychange', this.visibleFn);
    window.addEventListener('popstate', this.routerFn);
  },
}
</script>

import cheerio from 'cheerio';
import fs from 'fs';
import path from 'path';


interface OptionProps {
    outDir?: string;
    version?: string;
}

export default (option: OptionProps) => {
    let {
        outDir = 'dist',
        version = new Date().getTime(),
    } = option ?? {}

    return {
        name: 'vate-plugin-add-version',
        transformIndexHtml(html: string) {
            const $ = cheerio.load(html);
            $('body').append(`<div id="versionTag" style="display: none">${version}</div>`);
            return $.html();
        },
        writeBundle() {
            const versionData = {
                version
            };
            if (!fs.existsSync(outDir)) {
                fs.mkdirSync(outDir, { recursive: true });
            }
            fs.writeFileSync(path.join(outDir, 'version.json'), JSON.stringify(versionData, null, 2));
        },
    }
}

// vite.config.ts

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    createVersion({
      outDir: 'dist',
    })],
  build: {
    outDir: 'dist'
  },
  server: {
    port: 3000,
    host: "0.0.0.0"
  },
})