vite-plugin-env-inject

English | 简体中文

为浏览器构建注入运行时环境变量的 Vite 插件。

动机

Vite 默认在构建时将 import.meta.env.VITE_* 静态内联进产物，适合固定配置部署，但不适合「同一 Docker 镜像在不同环境使用不同配置」的场景。

本插件在不改动业务代码写法的前提下，将环境变量访问切换为运行时配置脚本。构建阶段不会读取环境变量，只在容器启动或 vite dev 时才注入实际的 VITE_* 值。

特性

• 自动将 import.meta.env.VITE_* 和 process.env.VITE_* 转为运行时全局变量访问
• 自动向 index.html 注入配置脚本
• vite dev 时通过 dev server 提供实时配置
• 构建时输出运行时配置模板（__vite_env_config__.js.template）

安装

npm install -D vite-plugin-env-inject

用法

// vite.config.ts
import { defineConfig } from 'vite'
import { envInject } from 'vite-plugin-env-inject'

export default defineConfig({
  plugins: [envInject()],
})

源码中照常使用环境变量：

const apiUrl = import.meta.env.VITE_API_URL
const token = process.env.VITE_API_TOKEN

构建时插件只做代码转换并输出配置模板；运行时再由配置脚本填入真实值，并在应用 bundle 加载前注入。

| 阶段 | 行为 | |------|------| | vite build | 转换 env 访问、注入 script 标签、输出空占位文件 + .template | | 容器启动 | 由 Dockerfile 中的 envsubst 将 .template 渲染为 __vite_env_config__.js | | vite dev | dev server 从当前环境动态提供配置 |

配置项

envInject({
  prefix: 'VITE_',
  globalName: '__VITE_INJECT_ENV__',
  configFile: '__vite_env_config__.js',
  include: ['VITE_EXTRA_KEY'],
  debug: true,
})

开发

npm install
npm run build
npm test
npm run dev

License

MIT