vite打包加版本号

### 如何在 Vite 打包过程中加入版本号配置

#### 配置 `vite.config.ts` 文件实现自动注入版本号

为了使打包后的文件带上版本号，可以利用插件或自定义脚本读取项目的 `package.json` 中的 `version` 字段，并将其嵌入到构建流程里。下面展示一种通过修改 `vite.config.ts` 来达到目的的方法：

import { defineConfig, loadEnv } from 'vite';
import vue from '@vitejs/plugin-vue';

export default ({ mode }) => {
    process.env = {...process.env, ...loadEnv(mode, process.cwd())};

    return defineConfig({
        plugins: [
            vue(),
            // 插入其他必要的插件...
        ],
        build: {
            rollupOptions: {
                output: {
                    entryFileNames: `[name].${process.env.VUE_APP_VERSION}.js`,
                    chunkFileNames: `[name].${process.env.VUE_APP_VERSION}.js`,
                    assetFileNames: `[name].${process.env.VUE_APP_VERSION}[ext]`
                }
            }
        },
        define: {
            __APP_VERSION__: JSON.stringify(process.env.VUE_APP_VERSION || "0.0.0"),
        }
    });
};

这段代码做了两件事：一是设置了输出文件命名规则来包含版本号；二是定义了一个全局常量 `__APP_VERSION__` 可供应用内部访问。

#### 修改入口文件以响应版本变化并清除缓存

为了让客户端能够识别新的版本并清理旧版数据，可以在主程序启动前执行一次简单的检测逻辑[^4]:

// main.js 或者 main.ts
if (__APP_VERSION__ !== localStorage.getItem('currentAppVersion')) {
    console.log(`Detected new app version ${__APP_VERSION__}, clearing storage.`);
    
    // 清除存储中的过期数据
    localStorage.clear();
    sessionStorage.clear();

    // 更新本地存储的应用版本记录
    localStorage.setItem('currentAppVersion', __APP_VERSION__);
}

这样当应用程序加载时就会检查是否有新版可用，如果有则会刷新页面并重置用户的临时数据。