如何全局配置Nuxt.js的Axios baseURL使其生效

你的配置不生效本质是运行时配置的优先级高于静态配置，且存在未定义的空环境变量覆盖了原有配置：

• nuxt.config.js中嵌套在publicRuntimeConfig.axios下的browserBaseURL、privateRuntimeConfig.axios下的baseURL，优先级比你单独写在顶层axios块的静态配置更高
• 你当前引用的process.env.BROWSER_BASE_URL和process.env.BASE_URL未在项目环境中定义，取值为undefined时，@nuxtjs/axios模块会自动 fallback 到Nuxt开发服务器默认的http://localhost:3000，直接覆盖了你原本写的http://localhost:9000配置
• 你手动在组件内写axios.defaults.baseURL = 'http://localhost:9000'能生效，是因为这行代码直接修改了axios实例的全局默认值，绕过了Nuxt模块的配置合并逻辑

根据你的实际使用场景二选一即可：

场景1：固定后端地址，无需动态读取环境变量 #

直接删除冗余的嵌套运行时配置，只保留顶层的axios配置块即可，修改后的nuxt.config.js关键代码如下：

export default {
  modules: [
    '@nuxtjs/axios',
  ],
  axios: {
    baseURL: 'http://localhost:9000'
  }
}

场景2：多环境动态配置，需要按部署环境切换后端地址 #

要保证两个关键点：

• 给环境变量配置兜底值，避免取值为undefined时触发模块的默认fallback
• 正确区分两个配置项的作用域：baseURL是服务端渲染阶段发请求使用的地址，browserBaseURL是浏览器端发请求使用的地址
  标准写法如下：

export default {
  modules: [
    '@nuxtjs/axios',
  ],
  // 静态兜底配置
  axios: {
    baseURL: 'http://localhost:9000',
    browserBaseURL: 'http://localhost:9000'
  },
  publicRuntimeConfig: {
    axios: {
      // 浏览器端读取的环境变量配置，兜底值和静态配置一致
      browserBaseURL: process.env.BROWSER_BASE_URL || 'http://localhost:9000'
    }
  },
  privateRuntimeConfig: {
    axios: {
      // 服务端渲染阶段读取的环境变量配置，兜底值和静态配置一致
      baseURL: process.env.BASE_URL || 'http://localhost:9000'
    }
  }
}

对应在项目根目录新建.env文件，定义需要的环境变量即可：

BASE_URL=http://localhost:9000
BROWSER_BASE_URL=http://localhost:9000

• 修改完nuxt.config.js后必须重启Nuxt开发服务，模块相关的配置不会被热更新实时加载
• 不要在组件中通过import axios from 'axios'导入原生axios实例发起请求，要使用Nuxt注入的$axios实例（选项式API中直接调用this.$axios，组合式API中通过useNuxtApp().$axios获取），原生axios实例不会自动读取Nuxt模块的配置
• 配置完成后不需要在单文件组件中手动修改axios.defaults.baseURL，直接调用this.$axios.get('/posts')即可自动拼接正确的后端地址

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