Nuxt.js 中 axios 不使用已设定的 baseURL：如何解决？

Nuxt.js 中 axios 不使用已设置的 baseURL：问题与解决方案

在使用 Nuxt.js 进行开发时，你可能会遇到这样的问题：axios 并不使用你已在 nuxt.config.js 中正确设置的 baseURL。本文将深入探讨这一问题，并提供详细的解决方法。

问题

当你在 asyncData() 中调用 API 时，axios 仍会向 http://localhost:3000 发出请求，即使你已经正确设置了 $axios.defaults.baseURL。

解决方法

解决这一问题的关键在于使用正确的 Nuxt.js 版本和 Axios 模块，并确保在 SSR 模式下正确配置 baseURL。以下是详细步骤：

1. 更新 Nuxt.js 和 Axios 版本： 确保使用的是 @nuxtjs/axios 5.13.1 和 Nuxt 2.15.6。

2. 配置 baseURL： 在 nuxt.config.js 中，正确配置 baseURL，如下所示：

  publicRuntimeConfig: {
    axios: {
      baseURL: process.env.EXPRESS_SERVER_URL
    }
  },

  privateRuntimeConfig: {
    axios: {
      baseURL: process.env.EXPRESS_SERVER_URL,
    }
  },

观察

如果你在页面内容编辑后触发热模块重新加载 (HMR)，你可能会发现请求使用了正确的 URL。这表明 axios 可能在服务器上没有在正确的时间被触发。

解决方案（可选）

如果你在 created() 钩子内调用 store，则请求将成功执行。

总结

要解决 Nuxt.js 中 axios 不使用已设置 baseURL 的问题，你需要：

1. 确保使用正确的 Nuxt.js 和 Axios 版本。
2. 正确配置 baseURL。
3. 考虑在 created() 钩子内调用 store（可选）。

常见问题解答

1. 为什么 baseURL 不被使用？ 这可能是由于 Nuxt.js 版本不正确或 Axios 模块未正确安装。

2. 为什么 HMR 会解决问题？ HMR 可以重新触发服务器上的请求，从而使用正确的 baseURL。

3. 为什么在 created() 钩子内调用 store 可以解决问题？ 这可以强制在服务器上触发请求。

4. 我仍然遇到问题，怎么办？ 请确保你已经仔细按照上述步骤操作，并检查你的代码是否存在任何错误。如果问题仍然存在，请在 Nuxt.js 论坛或 GitHub 上寻求帮助。

5. 如何防止此问题在将来发生？ 保持 Nuxt.js 和 Axios 的最新版本，并确保 baseURL 配置正确。