项目配置环境变量

在 Vue3 + Vite 项目开发过程中，我们通常会经历 开发环境（development）、测试环境（testing） 和 生产环境（production）。不同环境下的接口地址、配置项可能不同，如果手动切换这些配置，会非常繁琐且容易出错。因此，我们可以使用 Vite 提供的环境变量功能，让代码根据环境自动切换配置。

---

1. 为什么要使用环境变量

在开发中，我们可能会遇到以下问题：

• 手动修改 API 地址：每次切换环境时，手动修改 baseURL，容易出错。
• 不同环境有不同的配置：比如 日志开关、调试模式、第三方 SDK 配置等。
• 提升开发效率：环境变量可以让 Vue 自动选择正确的配置，避免重复操作。

解决方案：

• Vite 提供 .env 文件，可以根据环境自动加载不同的变量。
• 在代码中通过 import.meta.env 访问环境变量。

---

2. 在 Vue 项目中创建环境变量文件

在 Vue3 + Vite 项目中，我们需要在 项目根目录 下创建不同的环境变量文件：

项目目录
│── .env.development    // 开发环境
│── .env.test           // 测试环境
│── .env.production     // 生产环境

.env.development（开发环境）

# 变量必须以 VITE_ 为前缀才能暴露给外部读取
NODE_ENV = 'development'
VITE_APP_TITLE = '硅谷甄选运营平台 - 开发环境'
VITE_APP_BASE_API = '/dev-api'

.env.test（测试环境）

NODE_ENV = 'test'
VITE_APP_TITLE = '硅谷甄选运营平台 - 测试环境'
VITE_APP_BASE_API = '/test-api'

.env.production（生产环境）

NODE_ENV = 'production'
VITE_APP_TITLE = '硅谷甄选运营平台 - 生产环境'
VITE_APP_BASE_API = '/prod-api'

---

3. 配置 Vite 运行环境

Vite 提供了 --mode 选项 来指定当前运行的环境。为了让项目能够正确选择不同环境的 .env 文件，我们需要在 package.json 中配置运行命令。

修改 package.json

"scripts": {
  "dev": "vite --open",                      // 默认使用开发环境（development）
  "build:test": "vue-tsc && vite build --mode test",       // 使用测试环境（test）
  "build:pro": "vue-tsc && vite build --mode production",  // 使用生产环境（production）
  "preview": "vite preview"                  // 预览构建后的生产环境
}

运行不同环境

运行命令	使用的环境变量文件
pnpm run dev	.env.development
pnpm run build:test	.env.test
pnpm run build:pro	.env.production

---

4. 在 Vue 代码中使用环境变量

如何获取环境变量

Vite 提供了 import.meta.env 让我们在代码中访问环境变量：

console.log(import.meta.env.VITE_APP_TITLE);  // 打印当前环境的标题
console.log(import.meta.env.VITE_APP_BASE_API);  // 打印 API 地址

示例：在 API 请求中使用

import axios from 'axios';

const apiClient = axios.create({
  baseURL: import.meta.env.VITE_APP_BASE_API, // 根据环境自动切换 API 地址
  timeout: 5000,
});

export default apiClient;