让你秒懂 Vue .env 文件

在 Vue.js 项目中，.env 文件用于配置环境变量，这些变量可以在开发、测试和生产环境中使用。Vue CLI 提供了一种机制，允许你为不同的环境定义不同的环境变量。以下是 .env、.env.development 和 .env.production 文件的用途和区别，以及如何使用它们。

1. .env 文件

.env 文件是项目的默认环境变量文件，适用于所有环境。它包含通用的环境变量，这些变量在开发、测试和生产环境中都会被加载。

# .env 文件
VUE_APP_API_URL=https://api.example.com
VUE_APP_VERSION=1.0.0

2. .env.development 文件

.env.development 文件专门用于开发环境。它会覆盖 .env 文件中定义的变量，仅在开发模式下生效。

# .env.development 文件
VUE_APP_API_URL=http://localhost:3000
VUE_APP_ENV=development

3. .env.production 文件

.env.production 文件专门用于生产环境。它会覆盖 .env 文件中定义的变量，仅在生产模式下生效。

# .env.production 文件
VUE_APP_API_URL=https://prod-api.example.com
VUE_APP_ENV=production

4. 环境变量的加载规则

Vue CLI 会根据当前运行的模式加载相应的环境变量文件：

1. 默认加载 .env 文件：所有环境都会加载 .env 文件中的变量。

2. 根据模式加载特定文件：

   • 开发模式（npm run serve）：加载 .env.development 文件。

   • 生产模式（npm run build）：加载 .env.production 文件。

   • 测试模式（npm run test）：加载 .env.test 文件（如果有）。

如果 .env.development 或 .env.production 中的变量与 .env 文件中的变量冲突，特定环境文件中的变量会覆盖默认文件中的变量。

5. 如何使用环境变量

在 Vue.js 项目中，你可以通过 process.env 访问环境变量。所有以 VUE_APP_ 开头的变量都可以在代码中使用。

// 在 Vue 组件中使用环境变量
export default {
  mounted() {
    console.log("API URL:", process.env.VUE_APP_API_URL);
    console.log("Environment:", process.env.VUE_APP_ENV);
  }
};

注意

• 环境变量必须以 VUE_APP_ 开头，否则不会被 Vue CLI 打包工具注入到代码中。

• 环境变量的值会被自动解析为字符串，因此如果需要其他类型（如数字或布尔值），需要手动转换。

6. 自定义环境变量

如果你需要为其他环境（如测试环境）定义变量，可以创建 .env.test 文件。Vue CLI 会根据运行的命令自动加载对应的环境变量文件。

# .env.test 文件
VUE_APP_API_URL=http://test-api.example.com
VUE_APP_ENV=test

7. 总结

• .env：默认环境变量文件，适用于所有环境。

• .env.development：开发环境专用，覆盖默认变量。

• .env.production：生产环境专用，覆盖默认变量。

• 加载规则：默认加载 .env，然后根据模式加载 .env.development、.env.production 或 .env.test。

• 使用方式：通过 process.env.VUE_APP_ 访问环境变量。

通过合理使用这些文件，就可以轻松管理不同环境下的配置，确保代码的灵活性和可维护性。