如何让npm包根据消费应用切换API多环境地址？

1. 全局配置初始化函数 #

在你的npm包中暴露一个全局配置方法，让消费应用在启动时调用一次，统一设置API环境或基础URL。

包内实现：

// 包的配置模块（比如src/config.js）
let apiBaseUrl = 'https://api.example.com'; // 默认生产环境

export function setApiConfig(envOrUrl) {
  // 支持传入环境标识或直接传入自定义URL
  if (['development', 'test', 'production'].includes(envOrUrl)) {
    const envMap = {
      development: 'http://localhost:3000/api',
      test: 'https://test-api.example.com',
      production: 'https://api.example.com'
    };
    apiBaseUrl = envMap[envOrUrl];
  } else {
    apiBaseUrl = envOrUrl;
  }
}

// 封装通用请求工具，供所有组件调用
export function apiRequest(endpoint) {
  return fetch(`${apiBaseUrl}/${endpoint}`);
}

消费应用使用：

import { setApiConfig } from 'your-vue-custom-elements-package';

// 在应用初始化阶段执行
setApiConfig('test'); // 或者直接传URL：setApiConfig('https://custom-api.example.com')

所有组件通过调用apiRequest发起请求，自动使用全局配置的基础URL，无需重复传参。

2. Vue插件式全局注入（适用于Vue组件库场景） #

如果你的包是以Vue插件形式发布的，可以通过app.use时传入配置，将API基础URL注入全局，供所有组件使用。

包内插件实现：

// 包的入口文件（比如src/index.js）
export default {
  install(app, options) {
    const { apiEnv } = options;
    let baseUrl;

    // 根据环境标识映射URL，或直接使用传入的自定义URL
    if (typeof apiEnv === 'string') {
      const envUrls = {
        dev: 'http://localhost:3000/api',
        test: 'https://test-api.example.com',
        prod: 'https://api.example.com'
      };
      baseUrl = envUrls[apiEnv] || apiEnv;
    }

    // 注入全局属性，组件内可通过this.$apiBase访问
    app.config.globalProperties.$apiBase = baseUrl;

    // 可选：封装全局请求方法
    app.config.globalProperties.$fetchApi = (endpoint) => {
      return fetch(`${baseUrl}/${endpoint}`);
    };
  }
};

消费应用使用：

import { createApp } from 'vue';
import YourComponents from 'your-vue-custom-elements-package';
import App from './App.vue';

const app = createApp(App);
// 传入环境标识或自定义URL
app.use(YourComponents, { apiEnv: 'dev' });
app.mount('#app');

组件内部直接通过this.$apiBase拼接请求地址即可。

3. 全局属性/变量读取（适用于纯自定义元素场景） #

如果是纯自定义元素（通过defineCustomElement创建），可以让消费应用通过全局DOM属性或window变量传递配置，组件内部读取使用。

方式1：DOM全局属性 #

消费应用在HTML中设置：

<body data-your-package-api-env="development">
  <your-custom-component></your-custom-component>
</body>

组件内部读取：

// 组件内获取配置的方法
const getApiBaseUrl = () => {
  const env = document.body.getAttribute('data-your-package-api-env');
  const urlMap = {
    development: 'http://localhost:3000/api',
    test: 'https://test-api.example.com',
    production: 'https://api.example.com'
  };
  return urlMap[env] || env || 'https://api.example.com';
};

// 发起请求时使用
fetch(`${getApiBaseUrl()}/user/list`);

方式2：window全局变量 #

消费应用在全局脚本中设置：

window.yourPackageConfig = {
  apiBaseUrl: 'https://test-api.example.com'
};

组件内部读取：

const apiBaseUrl = window.yourPackageConfig?.apiBaseUrl || 'https://api.example.com';
fetch(`${apiBaseUrl}/user/list`);

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