vue怎么获取baseURL

在 Vue 中获取或设置 baseURL 主要涉及全局配置、Axios 实例化及组件级设置。以下是具体方法和应用场景的详细说明：

• 作用：设置 Vue 应用全局的 baseURL（通常用于 Axios 请求）。
• 示例：// main.js 或入口文件import Vue from 'vue';Vue.config.baseURL = '
  https://api.example.com';
• 注意：此配置需在创建 Vue 实例前设置，且需配合 Axios 或其他请求库使用。

• 作用：直接设置 Axios 库的全局默认 baseURL。
• 示例：import axios from 'axios';axios.defaults.baseURL = '
  https://api.example.com';
• 优势：所有通过 axios 发起的请求会自动继承该 baseURL。

• 作用：在组件内动态设置 baseURL（需结合插件或自定义逻辑）。
• 示例：import { use } from 'vue';export default { setup() { use({ baseURL: '/custom-api', // 需自定义逻辑处理 }); },};
• 注意：Vue 3 的 use 通常用于插件，直接设置 baseURL 需额外封装逻辑。

• 作用：在单元测试中为组件设置测试专用的 baseURL。
• 示例：import { mount } from '@vue/test-utils';import MyComponent from '@/components/MyComponent.vue';const wrapper = mount(MyComponent, { global: { plugins: [ { install(app) { app.config.baseURL = '/mock-api'; }, }, ], },});

• 作用：在创建 Vue 应用实例时设置全局 baseURL。
• 示例：import { createApp } from 'vue';import App from './App.vue';const app = createApp(App);app.config.baseURL = '
  https://api.example.com';app.mount
  ('#app');

• 作用：为特定模块或服务创建独立的 baseURL。
• 示例：import axios from 'axios';const apiClient = axios.create({ baseURL: '
  https://api.example.com/v2'
  ,});// 使用自定义实例apiClient.get('/users').then(...);
• 优势：避免全局配置冲突，适合多 API 接口场景。

• 全局配置：通过 Vue.config.baseURL 或 axios.defaults.baseURL 直接读取。
• Axios 实例：访问实例的 defaults.baseURL 属性：console.log(axios.defaults.baseURL); // 输出全局配置console.log(apiClient.defaults.baseURL); // 输出自定义实例配置

1. 优先级：组件级 > 全局配置 > Axios 默认值。
2. 环境区分：建议通过环境变量（如 .env 文件）动态设置 baseURL：axios.defaults.baseURL = process.env.VUE_APP_API_URL;
3. 测试隔离：测试环境中使用 mountOptions 或 Mock 工具避免污染全局配置。

通过以上方法，可以灵活地在 Vue 项目中管理 baseURL，适应开发、测试和生产环境的不同需求。