纯前端vue项目实现版本更新(纯代码教程)

第一步 (版本信息生成文件)

  • 新建 versionUpdatePlugin.ts 文件
javascript 复制代码
// versionUpdatePlugin.ts文件
import fs from 'fs';
import path from '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文件 只贴入部分配置代码
javascript 复制代码
  // vite.config.ts
  // 引入版本号生成代码
   import versionUpdatePlugin from '@/src/utils/versionUpdatePlugin';
   
   export default defineConfig(({ command }) => {
     //获取当前时间戳作为版本信息
     //这里的值你们也可以不用时间戳作为唯一值 也可以获取系统版本号 作为版本差异值
     const now = new Date().getTime();
     return {
        define: {
          // 定义全局变量
          __APP_VERSION__: now
        },
        plugins: {
          //   版本更新插件
          versionUpdatePlugin({
              version: now
          }),
        }
   
   })

第三步 (router文件)

  • 修改router文件 (你配置路由守卫的那个文件)
typescript 复制代码
declare const __APP_VERSION__: string; //如果有ts代码警告 上面就声明一下这个值
// 版本监控 (此代码随便贴入那个ts文件)
const versionCheck = async (to) => {
  if (import.meta.env.VITE_NODE_ENV === 'development') return;
  const response = await axios.get('/version.json');
  if (__APP_VERSION__ !== response.data.version) {
    const key = 'updatable';
    //此弹窗插件使用antd组件 你也可以修改增加取消等事件操作
    Modal.info({
      title: '📢 发现新的版本,请及时更新',
      onOk() {
        message.loading({ content: () => '版本更新中...', key });
        setTimeout(() => {
          location.replace(window.location.origin + to.path);
          message.success({ content: '更新成功', key, duration: 2 });
        }, 2000);
      }
    });
  }
};

/**
 * 路由守卫
 */
router.beforeEach(async (to, from) => {
   //未登录操作
    ...
   //动态路由注册 
    ...
   //版本更新
   await versionCheck(to);
});

其他

你可以选择放在任何地方去判断更新,可以不用采取我的方案,放在路由里面去做动态更新,你们也可以在全局错误判断里去让用户感知版本更新,等等等方案。

后面我会看看pwa解决方案 如果你们有更好的版本更新解决方案也可以讨论一下,欢迎👏

相关推荐
爷_3 小时前
字节跳动震撼开源Coze平台!手把手教你本地搭建AI智能体开发环境
前端·人工智能·后端
charlee445 小时前
行业思考:不是前端不行,是只会前端不行
前端·ai
Amodoro6 小时前
nuxt更改页面渲染的html,去除自定义属性、
前端·html·nuxt3·nuxt2·nuxtjs
Wcowin6 小时前
Mkdocs相关插件推荐(原创+合作)
前端·mkdocs
伍哥的传说6 小时前
CSS+JavaScript 禁用浏览器复制功能的几种方法
前端·javascript·css·vue.js·vue·css3·禁用浏览器复制
lichenyang4536 小时前
Axios封装以及添加拦截器
前端·javascript·react.js·typescript
Trust yourself2437 小时前
想把一个easyui的表格<th>改成下拉怎么做
前端·深度学习·easyui
三口吃掉你7 小时前
Web服务器(Tomcat、项目部署)
服务器·前端·tomcat
Trust yourself2437 小时前
在easyui中如何设置自带的弹窗,有输入框
前端·javascript·easyui
烛阴7 小时前
Tile Pattern
前端·webgl