.env.development、.env.production、.env.staging

2025/9/20 1:07:04 来源：https://blog.csdn.net/daoshen1314/article/details/140403262 浏览: 次关键词：.env.development、.env.production、.env.staging

环境变量文件（如 .env.development、.env.production、.env.staging）用于根据不同的环境（开发、生产、测试等）配置应用程序的行为。

作用

.env.development：用于开发环境的配置。开发人员在本地开发时会使用这个文件中的配置。
.env.production：用于生产环境的配置。应用程序在部署到生产环境时会使用这个文件中的配置。
.env.staging：用于预发布环境的配置。通常用于测试和验证即将发布到生产环境的版本。

如何使用和配置

详细步骤：

1. 创建环境变量文件

在项目的根目录下创建以下文件：

.env.development
.env.production
.env.staging

2. 配置环境变量

在每个文件中添加环境变量。例如：

.env.development：

VITE_API_URL=http://localhost:3000/api
VITE_APP_MODE=development

.env.production：

VITE_API_URL=https://api.example.com
VITE_APP_MODE=production

.env.staging：

VITE_API_URL=https://staging-api.example.com
VITE_APP_MODE=staging

3. 在代码中使用环境变量

在 Vite 项目中，所有以 VITE_ 开头的环境变量都可以在代码中通过 import.meta.env 访问。例如：

console.log(import.meta.env.VITE_API_URL);
console.log(import.meta.env.VITE_APP_MODE);

4. 配置 Vite 以使用不同的环境文件

Vite 会根据 NODE_ENV 环境变量自动加载相应的 .env 文件。你可以通过在启动脚本中设置 NODE_ENV 来指定使用哪个环境文件。

package.json：

{"scripts": {"dev": "vite --mode development","build": "vite build --mode production","serve": "vite preview --mode production","staging": "vite build --mode staging"}
}

在上述配置中：

npm run dev 会使用 .env.development 文件。
npm run build 和 npm run serve 会使用 .env.production 文件。
npm run staging 会使用 .env.staging 文件。

5. 运行项目

根据需要运行不同的脚本：

开发环境：
```
npm run dev
```
生产环境：
```
npm run build
npm run serve
```
预发布环境：
```
npm run staging
```

示例项目结构

以下是一个示例项目结构，展示了如何组织和使用环境变量文件：

my-vite-project/
├── .env.development
├── .env.production
├── .env.staging
├── package.json
├── src/
│   ├── main.js
│   └── App.vue
└── vite.config.js