vite 环境变量配置
时间: 2024-07-23 10:01:20 浏览: 129
Vite 是一个基于 ES 模块的现代前端构建工具,它提供了一个轻量级、快速的开发体验。在 Vite 中,环境变量配置通常通过 `.env` 文件或者称为“环境插件”来进行管理,目的是为了在生产环境和开发环境中分离敏感信息和配置。
1. **`.env` 文件**: 使用 `.env` 文件可以保存全局的环境变量。Vite 支持自动加载 `.env`, `.env.local`, 和 `.env.{stage}`(如 `.env.dev` 或 `.env.production`) 文件,其中 `{stage}` 可以是 `dev`, `prod`, `test` 等。每个阶段对应一个特定的环境变量集。例如:
```
PORT=8080
API_URL=http://localhost:3000
```
2. **环境插件 (vite-plugin-env)**: Vite 官方推荐使用第三方插件如 `vite-plugin-env` 来更方便地处理环境变量。通过该插件,你可以通过 `process.env.VAR_NAME` 访问环境变量,它们会被解析成相应的值。
3. **Vite 构建命令**: 当你在构建应用时,你可以传递环境变量到 Vite,这通常是通过 `VITE_MODE` 或者 `VITE_CONFIG` 环境变量来指定,例如:
- 开发模式 (`dev`): `VITE_MODE=development vite`
- 生产模式 (`prod`): `VITE_MODE=production vite build`
4. **跨平台部署**:
- 对于CI/CD系统,你可以通过配置 CI 工具(如 GitLab CI/CD, CircleCI, Travis CI 等)将不同的环境变量传入构建过程。
配置完成后,Vite 将在相应的环境中加载不同的变量,以便保持代码的灵活性和安全性。
阅读全文