vite-plugin-browser-env

English | 简体中文

一个可以将 .env 环境变量文件安全地注入到浏览器运行时环境中的 Vite 的插件，方便在运行时修改环境变量，实现一次打包多环境部署。

特性

• 将指定的环境变量注入到浏览器的 window.env 对象中
• 支持自定义环境变量前缀、对象名称和文件名
• 支持包含和排除特定环境变量
• 自动生成 js 版本环境变量配置文件到 dist 根目录，方便后续在运行时修改环境变量

安装

使用 npm：

npm install vite-plugin-browser-env -D

或者使用 yarn、pnpm 等：

yarn add vite-plugin-browser-env -D
pnpm add vite-plugin-browser-env -D

使用方法

在您的 vite.config.ts 文件中导入并使用插件：

import { defineConfig } from 'vite';
import browserEnvPlugin from 'vite-plugin-browser-env';

export default defineConfig({
  plugins: [
    browserEnvPlugin({
      // 配置选项
    }),
  ],
});

配置选项

| 选项 | 类型 | 默认值 | 描述 | | --------------- | ---------- | ----------------- | ------------------------------ | | prefix | string | 'VITE_' | 环境变量前缀 | | envObjectName | string | 'env' | 注入到 window 对象上的属性名 | | fileName | string | 'env-config.js' | 生成的环境配置文件名 | | includes | string[] | [] | 总是包含的环境变量名列表 | | excludes | string[] | [] | 总是排除的环境变量名列表 |

示例

假设您的 .env 文件内容如下：

VITE_APP_API_PROXY = http://api.example.com
VITE_APP_API_BASE = /api/
VITE_APP_FILE_BASE = /file-server/
VITE_APP_FILE_BUCKET = example-bucket
VITE_APP_SECRET = 123456

您的 vite.config.ts 配置如下：

import { defineConfig } from 'vite';
import browserEnvPlugin from 'vite-plugin-browser-env';

export default defineConfig({
  plugins: [
    browserEnvPlugin({
      prefix: 'VITE_',
      includes: ['NODE_ENV'],
      excludes: ['VITE_APP_SECRET', 'VITE_APP_FILE_BUCKET'],
      envObjectName: 'env',
      fileName: 'env-config.js',
    }),
  ],
});

这个配置将：

• 包含以 VITE_ 开头的环境变量
• 包含 NODE_ENV 环境变量
• 排除 VITE_APP_SECRET 和 VITE_APP_FILE_BUCKET 环境变量
• 将符合条件的环境变量注入到 window.env 对象中
• 生成名为 env-config.js 的配置文件，并输出到 dist 根目录

生成的 env-config.js 文件内容如下：

window.env = {
  VITE_APP_API_PROXY: 'http://api.example.com',
  VITE_APP_API_BASE: '/api/',
  VITE_APP_FILE_BASE: 'http://file.example.com/',
  NODE_ENV: 'development',
};

此时，您可以在启动开发服务或打包部署后，通过浏览器控制台访问 window.env 对象查看到被注入的环境变量：

console.log(window.env.VITE_APP_API_PROXY); // 输出: http://api.example.com

为了方便部署后随时修改环境变量，您可以在代码中通过 window.env 代替 import.meta.env 来获取环境变量：

import axios from 'axios';

// 创建 axios 实例
const http = axios.create({
  // baseURL: import.meta.env.VITE_APP_API_BASE,
  baseURL: window.env.VITE_APP_API_BASE, // 使用 window.env 代替 import.meta.env
});

注意事项

• 请确保不要将敏感信息（如密钥、密码等）通过此插件暴露到前端。
• 在生产环境中，建议仅暴露必要的环境变量。

贡献

欢迎提交问题和拉取请求。对于重大更改，请先开启一个 issue 进行讨论。

许可证

MIT