我无法使用 Axios 在我的 nuxt 应用程序中设置不同的 baseURL答案

【问题标题】：I can't set a different baseURL in my nuxt app using Axios我无法使用 Axios 在我的 nuxt 应用程序中设置不同的 baseURL
【发布时间】：2020-09-17 08:36:37
【问题描述】：

我正在尝试为我的 nuxt 应用程序设置 baseURL，以便它从 swapi api 发出请求，但它总是转到 localhost:3000，尽管我正在关注文档，但似乎我无法解决这个问题。

我的 nuxt.config.js 是这样的：

modules: [
'bootstrap-vue/nuxt',
'@nuxtjs/axios',
  ],

axios: {
    // proxyHeaders: false
    baseURL:"https://swapi.dev/api/"
},

在我的文件 /.nuxt/axios.js 中，baseURL 的代码如下所示：

 const baseURL = process.browser
  ? 'https://swapi.dev/api/'
  : (process.env._AXIOS_BASE_URL_ || 'https://swapi.dev/api/')

对于 vue 应用，我通常有一个 plugins/axios.js 文件，我会在其中放置：

axios.defaults.baseURL =
process.env.baseURL || process.env.apiUrl || "https://swapi.dev/api/";

但我认为 Nuxt 不需要这个。

【问题讨论】：

标签： javascript vue.js axios nuxt.js

【解决方案1】：

如果您要在整个应用程序中使用基本 URL，则必须在 Nuxt 配置中设置基本 URL，或者创建 const 文件，并将其导入任何地方！

在常量文件中：

export const BASE_URL = process.env.NODE_ENV === "development" ? "https://localhost:3000" : "https://swapi.dev/api/";

或在 Nuxt 配置中：

const BASE_URL = process.env.NODE_ENV === "development" ? "https://localhost:3000" : "https://swapi.dev/api/";

【讨论】：