如何在同一个应用程序中使用 2 个具有不同 baseURL 的 Axios 实例(vue.js)

我正在努力学习vue.所以我制作了一个小应用程序，可以显示来自API的新闻文章，在另一个视图中，允许用户登录到另一台服务器.

为此，我使用Axios.我知道我在某个时候让它工作得很好，但今天当我开始我的项目时，让两个API同时工作是不可能的.

这是我的登录服务:

import axiosTrainingAPI from 'axios'

axiosTrainingAPI.defaults.baseURL = 'https://api.**********.com'

const trainingAPI = {
  login (credentials) {
    return new Promise((resolve, reject) => {
      axiosTrainingAPI.post('/services/auth.php', credentials)
        .then(response => {
          resolve(response.data)
        }).catch(response => {
          reject(response.status)
        })
    })
  }
}

export default trainingAPI

以下是我的新闻服务:

import axiosGoogleNewsAPI from 'axios'

axiosGoogleNewsAPI.defaults.baseURL = 'https://newsapi.org'

const googleNewsAPI = {
  getPosts (newsId) {
    return new Promise((resolve, reject) => {
      axiosGoogleNewsAPI.get(`/v2/everything?q=${newsId}&sortBy=publishedAt&apiKey=***********`)
        .then(response => {
          resolve(response.data)
        }).catch(response => {
          reject(response.status)
        })
    })
  }
}

export default googleNewsAPI

这两个服务都位于不同的JS文件中，并在不同的vue文件中导入，但现在它们似乎无法共存，而且总是有一个服务覆盖另一个服务的baseURL(不总是相同的)，就像Axios实例在这两种情况下都是相同的一样.因此，有时第一个服务使用第二个服务的baseURL，有时第二个服务使用第一个服务的baseURL...

我不知道"import"的确切范围，因为它对我来说很新，但这两个实例都在不同的文件中，有不同的名称，所以我真的不明白它们是如何混淆的.除非"导入"总是调用模块的同一个实例，但我如何使用2个API？为什么它昨天起作用了...我很困惑.