vite打包配置版本号

你可以在 Vite 的配置文件 `vite.config.js` 中使用 `define` 配置项来指定版本号，如下所示：

// vite.config.js
import { defineConfig } from 'vite';

export default defineConfig({
  define: {
    '__APP_VERSION__': JSON.stringify(require('./package.json').version)
  }
});

然后在你的代码中就可以通过 `__APP_VERSION__` 访问到版本号了，例如：

console.log(`App version: ${__APP_VERSION__}`);

在打包时，Vite 会将 `__APP_VERSION__` 替换为实际的版本号。

相关问题

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__);
}

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

uniapp vue3 H5版本 vite 打包文件添加版本号

在uniapp中使用Vue3开发H5应用，并结合Vite构建工具打包文件时，为了管理不同版本的动态更新，通常会通过设置配置来自动在静态资源URL后面添加版本号。这有助于浏览器缓存控制和避免老版本文件导致的问题。

以下是大致步骤：

1. **修改Vite配置**：
在`vite.config.js`文件中，找到`build`部分的`outputDir`和`publicPath`配置。例如，你可以添加一个变量来动态拼接版本号：

const version = process.env.VERSION || 'latest'; // 获取环境变量或默认值

export default defineConfig({
  build: {
    outputDir: `./dist/${version}`, // 输出目录加上版本号
    publicPath: `/dist/${version}/`, // 公共路径也加上版本号
    rollupOptions: {
      input: 'src/main.ts',
      // ...
    },
  },
});

2. **管理版本号生成**：
- 环境变量：在部署前，可以设置环境变量如`npm run build --env.VERSION=1.0.0`，将特定版本号传递给构建过程。
- Git标签：每次发布新版本时，在Git提交时附上相应的tag，然后通过脚本获取当前发布的tag作为版本号。

3. **部署时处理版本号**：
部署服务器上，可以用Nginx、Apache或其他服务器配置规则，根据请求的URL自动指向对应版本的文件夹。