面试题：Vue CLI 中的环境变量配置及在最佳实践中的应用

Question

在 Vue CLI 项目中，如何配置不同环境（开发、测试、生产）的环境变量？请举例说明在实际项目最佳实践中，环境变量是如何使用来优化开发流程和部署的。

Answer 1

1. 配置不同环境的环境变量

在 Vue CLI 项目中，可以通过在项目根目录下创建不同的环境文件来配置环境变量。

• 开发环境（development）：创建 .env.development 文件，例如：

VUE_APP_API_BASE_URL=http://localhost:3000/api

• 测试环境（test）：创建 .env.test 文件，例如：

VUE_APP_API_BASE_URL=http://test-server.com/api

• 生产环境（production）：创建 .env.production 文件，例如：

VUE_APP_API_BASE_URL=http://prod-server.com/api

Vue CLI 会自动根据当前运行的模式加载对应的环境文件。

2. 实际项目最佳实践

• 优化开发流程：
  • 在开发环境中，设置 VUE_APP_API_BASE_URL 为本地开发服务器的 API 地址，这样开发人员在开发过程中可以直接调用本地 API 进行联调，提高开发效率。例如在 src/api/request.js 中：

import axios from 'axios';
const baseURL = process.env.VUE_APP_API_BASE_URL;
const service = axios.create({
  baseURL,
  timeout: 5000
});
export default service;

• 开发人员无需手动修改 API 地址，方便切换不同环境的 API。
• 优化部署：
  • 在部署时，根据不同的部署环境（测试、生产等），Vue CLI 会自动加载对应的环境变量。例如在测试环境部署时，会加载 .env.test 中的 VUE_APP_API_BASE_URL，确保应用调用测试服务器的 API。
  • 在生产环境部署时，加载 .env.production 中的环境变量，保证应用调用生产服务器的 API，避免了因硬编码 API 地址导致的部署错误，使得部署过程更加灵活和可靠。