使用 vue3+vite 完成项目版本控制，正式环境无缝更新

置顶前端猎码人

已于 2024-06-17 10:19:39 修改

阅读量384

点赞数 2

文章标签：前端 javascript 开发语言

于 2024-05-10 15:51:12 首次发布

本文链接：https://blog.csdn.net/qq_45549964/article/details/138668376

版权

第一步

在根目录下创建versionUpdatePlugin.js

// versionUpdatePlugin.js
const fs = require('fs')
const path = require('path')

const writeVersion = (versionFile, content) => {
  // 写入文件
  fs.writeFile(versionFile, content, (err) => {
    if (err) throw err
  })
}

export default (options) => {
  let config

  return {
    name: 'version-update',

    configResolved(resolvedConfig) {
      // 存储最终解析的配置
      config = resolvedConfig
    },

    buildStart() {
      // 生成版本信息文件路径
      const file = config.publicDir + path.sep + 'version.json'
      // 这里使用编译时间作为版本信息
      const content = JSON.stringify({ version: options.version })

      if (fs.existsSync(config.publicDir)) {
        writeVersion(file, content)
      } else {
        fs.mkdir(config.publicDir, (err) => {
          if (err) throw err
          writeVersion(file, content)
        })
      }
    },
  }
}

第二步

在vite.config.js中使用versionUpdatePlugin

import { defineConfig } from 'vite';
import versionUpdatePlugin from './versionUpdatePlugin.js'
export default defineConfig(({ command }) => {
  const version = new Date().getTime() //使用时间戳当作版本号
  ......
  return {
    ......
    define: {
      // 定义全局变量
      __APP_VERSION__: version,
    },
    plugins: [
      ......
      versionUpdatePlugin({
        version: version,
      }),
    ],
    ......
  };
});

第三步

在router路由守卫中校验版本号

/**
 * 路由守卫
 */
router.beforeEach(async (to, from) => {
  let  response = null
  if(process.env.NODE_ENV !== "development"){
    response = await axios.get('/version.json')
  }
  if (process.env.NODE_ENV === "development"||(process.env.NODE_ENV !== "development"&&__APP_VERSION__ === response.data.version)) {
    //处理正常路由跳转逻辑
    ......
  }else{
    //正式环境并且版本号校验未通过
    message.info('发现新版本，自动更新中...',1.5).then(()=>
        //看自己的路由跳转逻辑使用replace或者reload方法
        window.location.replace(window.location.origin+to.fullPath)
    )
  }
});

第四步

打包推送

浏览器切换路由监测到版本更新触发