nuxt如何在nuxt构建后手动更改axios baseUrl答案

【问题标题】：nuxt how to manually change axios baseUrl after nuxt buildnuxt如何在nuxt构建后手动更改axios baseUrl
【发布时间】：2020-06-08 08:06:48
【问题描述】：

现在我有一个问题，如何在构建后手动更改 axios baseUrl。只要指定的请求url改变了，我可以手动改变baseUrl，而不是重建项目

【问题讨论】：

标签： axios nuxt.js

【解决方案1】：

您必须使用axios.create() 函数创建一个新的axios 实例。然后，您可以使用此实例对新的 baseUrl 进行调用。

const myNewInstance = axios.create({
  baseURL: 'https://my-domain.com/api/',
  timeout: 3000,
  headers: {'X-Custom-Header': 'foobar'}
});

您还可以将其原型化为 plugin 内的 Vue 对象，然后您可以从所有组件和页面访问它。

【讨论】：

我不太了解如何手动更改 baseURL。我可以将 baseUrl 配置放入静态文件中吗？
构建后无法更改。为什么要在运行时更改它？如果您有多个要访问的 API 或端点，您应该为每个 API 或端点创建一个单独的 axios 实例。
目前也无法在运行时更改它。据说此功能即将推出 (github.com/nuxt-community/axios-module/issues/88)。
因为我的projects actual requset address is depend on actual deployment servers ip地址，所以我只想简单的改变静态的baseUrl，而不是重建。
这是不可能的。我建议您创建一个定义了 baseUrl 的配置文件，然后将其导入nuxt.config.js 并将其设置为axios。然后为每个部署创建一个单独的构建，从中获取来自 ENV 的配置变量。

【解决方案2】：

您可以使用名为API_URL 的环境变量覆盖baseUrl。只需将其设置为您需要的任何 URL。请参考这里的官方文档：https://axios.nuxtjs.org/options.html#baseurl

此外，如果您还想覆盖 browserBaseUrl，也可以使用 API_URL_BROWSER 环境变量以同样的方式进行。

提示：您可以通过预先设置单个命令的环境变量。所以，从技术上讲，这应该可行：

API_URL="https://example.com" nuxt start

【讨论】：

【解决方案3】：

使用跨环境：npm install cross-env

在您的项目中添加一个名为 environment 的文件夹在文件夹下你可以有不同的environment（例如开发、登台、生产）

您的环境配置将包含您的 baseUrl 和其他配置，假设对于开发，您可以使用 localhost，然后对于暂存或生产，您可以使用 API_URL

defaults.json \\development

defaults.prod.json \\production

在nuxt.config.ts build > extend 配置你的不同环境

这将替换defaults.json，具体取决于我们将在package.json 中运行脚本的环境。

在package.json 中，将您的脚本配置为将运行的环境（例如，npm run start 将使用NODE_ENV=development，它将使用defaults.json 和baseUrl: http://localhost:3000，npm run build 将使用defaults.prod.json 和baseUrl: http://www.API_URL.com和其他配置

更多详情您可以查看cross-env

【讨论】：

webpack打包后可以改api url吗？