Vue项目中的环境变量配置文件

在Vue项目中，.env.production 和 .env.development 是用于存储不同环境变量的配置文件，它们通过 Vite 或 Vue CLI 等构建工具被自动加载和使用。以下是详细的配置和调用机制：

一、环境变量文件的作用

1. .env.production

   • 生产环境配置（如正式API地址、CDN路径）。
   • 在执行 npm run build 时自动加载。

2. .env.development

   • 开发环境配置（如本地API地址、调试工具）。
   • 在执行 npm run dev 时自动加载。

3. 公共配置

   • 可创建 .env 文件存放所有环境共享的变量。

二、文件命名规则

文件名	加载时机
.env	所有环境
.env.local	所有环境（本地优先，会被git忽略）
.env.development	npm run dev（开发环境）
.env.production	npm run build（生产环境）

三、使用举例

1、我们在这两个文件设置相同的变量，赋予不同的值：

在 .env.development 中：

VITE_APP_TITLE=My App (开发环境)
VITE_API_BASE_URL=http://localhost:3000/api

在 .env.production 中：

VITE_APP_TITLE=My App (生产环境)
VITE_API_BASE_URL=https://api.example.com

注意：

• 变量名必须以 VITE_ 开头（Vite默认前缀）。
• Vue CLI项目使用 VUE_APP_ 前缀。

2、在代码中调用

// 使用 import.meta.env 获取环境变量（Vite项目）
console.log(import.meta.env.VITE_APP_TITLE); // 输出环境标题
console.log(import.meta.env.VITE_API_BASE_URL); // 输出API地址

// 在组件中使用
export default {
  setup() {
    const apiUrl = import.meta.env.VITE_API_BASE_URL;
    return { apiUrl };
  }
}

3、构建时自动加载

# 开发环境（加载 .env + .env.development）
npm run dev

# 生产环境（加载 .env + .env.production）
npm run build

4、看看package.json的脚本

"scripts": {
  "dev": "vite",
  "build": "vite build"
}

5、扩展：指定环境变量的package.json的脚步

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

在上述示例中，我们使用 --mode 选项来指定环境。对应的项目根目录下，应该有一个 .env.staging 文件，用于配置 staging 环境的变量。

# .env.staging
VITE_APP_TITLE=My App (Staging)
VITE_API_BASE_URL=https://api.example.com

至此，主要的内容说明完毕，接下来的内容如果有兴趣可以继续学习。

四、Vite与Vue CLI的差异

1. Vite项目

• 环境变量前缀：默认使用 VITE_。
• 获取方式：通过 import.meta.env 访问。
• 配置文件：需手动创建（默认不生成）。

2. Vue CLI项目

• 环境变量前缀：默认使用 VUE_APP_。
• 获取方式：通过 process.env 访问。
• 配置文件：默认生成 .env.development 和 .env.production。

五、常见问题与解决方案

1. 变量未生效

• 原因：变量名未以 VITE_ 或 VUE_APP_ 开头。
• 解决：确保变量名符合前缀规则。

2. 在构建后仍能修改

• 需求：希望生产环境的API地址在部署后可修改。
• 方案：

  // 通过window对象动态获取（需配合nginx等反向代理）
  const apiBaseUrl = window.__APP_CONFIG__.API_BASE_URL || '/api';

3. 区分测试/预发环境

• 创建新环境文件：如 .env.staging。
• 修改package.json：

  "scripts": {
    "build:staging": "vite build --mode staging"
  }

总结

1. 配置流程：

   • 按环境创建 .env.* 文件。
   • 使用特定前缀（如 VITE_）定义变量。

2. 调用方式：

   • 在代码中通过 import.meta.env（Vite）或 process.env（Vue CLI）访问。

3. 构建机制：

   • 不同命令自动加载对应环境的变量文件。

这种机制使项目能够在不同环境（开发、测试、生产）中灵活切换配置，避免硬编码敏感信息，提高开发效率和安全性。