如何在生成的TypeScript-Axios客户端中管理服务器URL及多环境配置？

1. 配置环境变量文件 #

Vue项目支持通过.env系列文件管理环境变量，需遵循以下规则：

• 创建对应环境的配置文件：
  • .env.development：开发环境配置
  • .env.production：生产环境配置
• 文件内变量必须以VUE_APP_开头，才能被Vue CLI识别，示例内容：

  # .env.development
  VUE_APP_API_BASE_URL=http://localhost:5225
  
  # .env.production
  VUE_APP_API_BASE_URL=https://your-production-api-domain.com
  

2. 集中封装API实例 #

不在每个组件重复初始化API类，统一在一个文件里封装实例：
在src/api/index.ts中编写代码：

import axios from 'axios';
import { TodoApi } from '@/generated-client';

// 创建axios实例，注入全局baseURL
const axiosInstance = axios.create({
  baseURL: process.env.VUE_APP_API_BASE_URL
});

// 初始化API类时传入该axios实例
export const todoApi = new TodoApi(undefined, undefined, axiosInstance);

3. 组件中直接使用封装好的API #

组件里只需导入封装好的实例，无需每次指定basePath：

import { todoApi } from '@/api';

// ...

async fetchTodos() {
  try {
    const resp = await todoApi.rootGet();
    this.todos = resp.data;
  } catch (err) {
    console.error(err);
  }
}

4. 环境切换说明 #

• 执行npm run dev时，自动加载.env.development
• 执行npm run build时，自动加载.env.production
• 若需要自定义环境（如测试环境），可创建.env.test，并通过vue-cli-service serve --mode test启动

内容的提问来源于stack exchange，提问作者Baksa Zoltán