vue项目统一管理后端URL

如果有多个后端服务，并且它们的URL不同，可以通过创建一个配置文件来统一管理这些URL。以下是一个简单的示例：

配置URL管理

创建一个名为 config.js 或 apiConfig.js的文件，作为配置文件。

// config.js

const apiUrl1 = 'http://localhost';
const apiUrl2 = 'http://terminal.com';

export { apiUrl1, apiUrl2 };

使用URL

在代码中导入配置文件，并根据需要使用其中的URL。可以根据自己的情况选择在Vue实例、Axios插件或组件中使用它。

在Vue实例中使用

在main.js文件配置。 

import { createApp } from 'vue'
import App from './App.vue'
import { apiUrl1 } from './config/apiConfig'

const app = createApp(App)
app.config.globalProperties.$apiUrl1 = apiUrl1;
app.mount('#app')

在 Vue 组件中，你可以通过 this.$apiUrl1 来访问 apiUrl1 变量。例如：

export default {
  created() {
    console.log(this.$apiUrl1); // 在控制台打印出 apiUrl1 的值
  },
  // ...其他组件代码
};

在Axios插件中使用

在AxiosPlugin.js文件配置

import axios from 'axios';
import { apiUrl1 } from './apiConfig'

export default {
  install(app) {
    axios.defaults.baseURL = apiUrl1;
    app.config.globalProperties.$axios = axios;
  },
};

在main.js文件配置。 

import { createApp } from 'vue'
import App from './App.vue'
import AxiosPlugin from './config/AxiosPlugin'


const app = createApp(App)
// 注册 Axios 插件
app.use(AxiosPlugin);
app.mount('#app')

你可以在任何组件或 Vue 实例中通过 this.$axios 来访问 Axios 实例，并发送 HTTP 请求了。

export default {
  mounted() {
    this.$axios.get('/endpoint')
      .then(response => {
        console.log(response.data);
      })
      .catch(error => {
        console.error(error);
      });
  },
};

在组件中使用：

import { apiUrl1 } from './config/apiConfig';

export default {
  methods: {
    fetchData() {
      this.$axios.get(`${apiUrl1}/your-api-endpoint`)
        .then(response => {
          // 处理响应
        })
        .catch(error => {
          // 处理错误
        });
    },
  },
};