在项目中管理多环境配置

Vue

在开发 Vue.js 项目时，我们通常需要为不同的环境（如开发环境、测试环境、生产环境等）配置不同的变量。Vue CLI 提供了灵活的方式来管理这些配置.

1. 使用 .env 文件管理环境变量

Vue CLI 支持通过 .env 文件来定义环境变量。你可以为不同的环境创建不同的 .env 文件：

• .env：默认环境变量（所有环境共享）
• .env.development：开发环境
• .env.production：生产环境
• .env.test：测试环境

示例

• .env.development（开发环境） NODE_ENV=development VUE_APP_API_URL=dev.api.example.com VUE_APP_PORT=8081

• .env.production（生产环境） NODE_ENV=production VUE_APP_API_URL=api.example.com

• .env.test（测试环境）

  NODE_ENV=test
  VUE_APP_API_URL=https://test.api.example.com
  

说明

• 环境变量必须以 VUE_APP_ 开头，才能在项目中通过 process.env.VUE_APP_* 访问。
• NODE_ENV 是特殊变量，Vue CLI 会根据它自动切换环境。

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

你可以在代码中通过 process.env.VUE_APP_* 访问这些环境变量。

示例

export const API_URL = process.env.VUE_APP_API_URL || 'https://default.api.example.com';
export const PORT = process.env.VUE_APP_PORT || 8080;

3. 修改启动命令以使用不同的配置文件

在 package.json 中，你可以通过修改 scripts 来指定使用不同的环境文件。

示例

"scripts": {
  "serve": "vue-cli-service serve", // 默认使用 .env.development
  "serve:prod": "vue-cli-service serve --mode production", // 使用 .env.production
  "serve:test": "vue-cli-service serve --mode test", // 使用 .env.test
  "build": "vue-cli-service build", // 默认使用 .env.production
  "build:dev": "vue-cli-service build --mode development", // 使用 .env.development
  "build:test": "vue-cli-service build --mode test" // 使用 .env.test
}

说明

• --mode 参数用于指定环境模式，Vue CLI 会根据模式加载对应的 .env 文件。

• 默认情况下：

  • serve 命令使用 development 模式。
  • build 命令使用 production 模式。

4. 运行项目

根据不同的环境运行项目：

• 开发环境：

  npm run serve
  

• 生产环境：

  npm run serve:prod
  

• 测试环境：

  npm run serve:test
  

---

Springboot同样可以使用多个配置文件以达到启动不同环境

修改 --spring.profiles.active=dev / test /