如何根据当前域名及部署环境动态配置Axios的baseURL？

嘿，我来帮你搞定这个动态配置Axios baseURL的问题～结合你提到的多环境部署场景，我整理了几个既符合高质量代码规范又实用的方案，你可以根据项目实际情况选择：

方案一：集中式配置文件+环境变量驱动（最推荐，易于维护） #

之前用Bitbucket环境变量没成功，大概率是配置链路没打通。咱们用配置文件分层+构建时环境变量加载的方式来解决：

1. 先在项目根目录创建config文件夹，拆分配置文件：

   • config.base.js：存放所有环境通用的配置（比如请求超时时间、通用headers）

   export default {
     timeout: 10000,
     headers: {
       'Content-Type': 'application/json',
       accept: 'application/json',
     },
   };
   

   • config.test-1.js：test-1环境专属配置

   export default {
     baseURL: 'https://api.test-1-site.com',
   };
   

   • config.test-2.js：test-2环境专属配置

   export default {
     baseURL: 'https://api.test-2-site.com',
   };
   

   • index.js：配置入口，根据环境变量加载对应配置

   import baseConfig from './config.base.js';
   import test1Config from './config.test-1.js';
   import test2Config from './config.test-2.js';
   
   const env = process.env.APP_ENV || 'default'; // 用APP_ENV区分环境，避免和NODE_ENV冲突
   
   const envConfigs = {
     'test-1': test1Config,
     'test-2': test2Config,
     default: { baseURL: 'https://api.default-site.com' }, // 兜底配置
   };
   
   export default { ...baseConfig, ...envConfigs[env] };
   

2. 在Axios实例中引入配置：

   import axios from 'axios';
   import appConfig from '../config/index.js';
   
   const axiosInstance = axios.create(appConfig);
   

3. 在Bitbucket Pipelines中配置环境变量：
   给test-1和test-2的部署任务分别设置APP_ENV=test-1和APP_ENV=test-2，打包时用cross-env跨平台注入变量（先安装cross-env：npm i cross-env --save-dev）：

   • test-1打包命令：cross-env APP_ENV=test-1 npm run build
   • test-2打包命令：cross-env APP_ENV=test-2 npm run build

方案二：根据当前页面域名自动判断（无需构建配置，适合纯前端部署） #

如果你的前端代码是直接部署到对应域名下，不需要构建区分环境，可以直接通过当前页面的域名动态返回baseURL：

import axios from 'axios';

// 把环境映射关系抽成配置对象，便于后续修改
const ENV_DOMAIN_MAP = {
  'test-1-site.com': 'https://api.test-1-site.com',
  'test-2-site.com': 'https://api.test-2-site.com',
};

const getBaseURL = () => {
  const currentDomain = window.location.hostname;
  // 找不到对应域名时返回兜底地址，避免请求失败
  return ENV_DOMAIN_MAP[currentDomain] || 'https://api.default-site.com';
};

const axiosInstance = axios.create({ 
  baseURL: getBaseURL(), 
  headers: { 
    'Content-Type': 'application/json', 
    accept: 'application/json', 
  }, 
});

方案三：构建工具直接注入环境变量（适合Vite/Webpack项目） #

如果你用Vite、Webpack这类现代构建工具，可以直接利用它们的环境变量注入能力：

以Vite为例： #

1. 创建环境变量文件：

   • .env.test-1：

     VITE_API_BASE_URL=https://api.test-1-site.com
     

   • .env.test-2：

     VITE_API_BASE_URL=https://api.test-2-site.com
     

2. 在Bitbucket中指定构建模式：

   • test-1环境打包：npm run build --mode test-1
   • test-2环境打包：npm run build --mode test-2

3. 在Axios中使用：

   import axios from 'axios';
   
   const axiosInstance = axios.create({ 
     baseURL: import.meta.env.VITE_API_BASE_URL || 'https://api.default-site.com', 
     headers: { 
       'Content-Type': 'application/json', 
       accept: 'application/json', 
     }, 
   });
   

高质量代码的几个关键细节： #

• 集中管理配置：所有环境相关的配置都放在一处，不要分散在代码里，后续修改更高效。
• 兜底机制：一定要设置默认的baseURL，防止出现未知环境时请求全部失败。
• 避免硬编码：把域名、API地址这类可变值抽成配置对象，不要直接写在逻辑代码中。
• 类型安全（可选）：如果用TypeScript，给配置加上类型定义，提前发现拼写错误。

内容的提问来源于stack exchange，提问作者Aleksei Alex