如何使用Vite构建工具创建动态环境变量及配置多环境.env文件

一、创建动态环境变量 #

Vite环境变量默认需以VITE_前缀开头才能在客户端代码中访问，动态变量可通过以下几种方式实现：

1. 运行时动态判断环境 #

直接在业务代码中根据当前环境模式（import.meta.env.MODE）动态赋值：

// 动态切换API地址
const apiBaseUrl = () => {
  switch (import.meta.env.MODE) {
    case 'development':
      return 'http://localhost:8080/api';
    case 'staging':
      return 'http://staging.example.com/api';
    case 'production':
      return 'http://prod.example.com/api';
    default:
      return '/api';
  }
};

2. 通过Vite配置注入动态值 #

在vite.config.js中使用define选项注入动态生成的变量，这类变量会在构建时被替换为具体值：

import { defineConfig } from 'vite';

export default defineConfig({
  define: {
    // 注入当前项目版本（从package.json读取）
    '__APP_VERSION__': JSON.stringify(process.env.npm_package_version),
    // 注入构建时间戳
    '__BUILD_TIMESTAMP__': JSON.stringify(new Date().getTime())
  }
});

之后可在代码中直接使用__APP_VERSION__和__BUILD_TIMESTAMP__。

3. 结合静态变量动态拼接 #

利用已定义的静态环境变量，动态组合出新的变量：

// 假设.env中已有VITE_API_DOMAIN=example.com
const fullApiUrl = `https://${import.meta.env.VITE_API_DOMAIN}/v2/api`;

二、配置多环境对应.env文件 #

1. 创建多环境.env文件 #

在项目根目录下创建对应环境的.env文件：

• .env.development（本地开发）：

VITE_MODE=development
VITE_API_URL=http://localhost:8080/api
VITE_BASE_URL=/

• .env.staging（预发布）：

VITE_MODE=staging
VITE_API_URL=http://staging.example.com/api
VITE_BASE_URL=/staging/

• .env.production（生产）：

VITE_MODE=production
VITE_API_URL=http://prod.example.com/api
VITE_BASE_URL=/

2. 配置vite.config.js加载对应环境变量 #

使用Vite内置的loadEnv函数根据当前模式加载指定.env文件，并配置不同环境的构建/开发参数：

import { defineConfig, loadEnv } from 'vite';
import vue from '@vitejs/plugin-vue'; // 以Vue项目为例，其他框架逻辑通用

export default defineConfig(({ mode }) => {
  // 加载对应模式的环境变量，空字符串参数表示加载所有前缀的变量
  const env = loadEnv(mode, process.cwd(), '');

  return {
    plugins: [vue()],
    // 根据环境配置基础路径
    base: env.VITE_BASE_URL || '/',
    server: {
      port: 3000,
      // 仅本地开发环境启用接口代理
      proxy: mode === 'development' ? {
        '/api': {
          target: env.VITE_API_URL,
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, '')
        }
      } : {}
    },
    build: {
      // 预发布环境保留sourcemap用于调试，生产环境关闭
      sourcemap: mode === 'staging',
      // 不同环境输出到不同目录
      outDir: mode === 'staging' ? 'dist-staging' : 'dist'
    }
  };
});

3. 配置npm脚本快速切换环境 #

在package.json中添加对应脚本，方便一键启动/构建不同环境：

{
  "scripts": {
    "dev": "vite", // 默认启动本地开发环境
    "build:staging": "vite build --mode staging",
    "build:prod": "vite build --mode production",
    "preview:staging": "vite preview --mode staging" // 预发布构建后预览
  }
}

注意事项 #

• 只有以VITE_开头的环境变量会被暴露给客户端代码，非VITE_前缀的变量仅能在vite.config.js中使用。
• loadEnv的第三个参数若设为VITE_，则只会加载该前缀的变量，设为空字符串可加载所有变量。

内容的提问来源于stack exchange，提问作者Jimi Gautam