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

时间:2020-06-08 08:06:48

标签: axios nuxt.js

现在我有一个问题,如何在构建后手动更改axios baseUrl。就算指定的请求网址已更改,我也可以手动更改baseUrl,而不是重建项目

3 个答案:

答案 0 :(得分:0)

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

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

您还可以将其原型制作到Vue内的plugin对象中,然后可以从所有组件和页面访问它。

答案 1 :(得分:0)

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

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

提示:可以在命令前添加环境变量。因此,从技术上讲,这应该可行:

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

答案 2 :(得分:0)

使用交叉环境:npm install cross-env

在您的项目中添加一个名为environment的文件夹 并且在该文件夹下,您可以有不同的environment(例如,开发,登台,生产)

environment folder

您的环境配置将具有您的baseUrl和其他配置,例如,对于开发,您可以具有本地主机,然后对于暂存或生产,您可以具有API_URL

defaults.json \\development development config

defaults.prod.json \\production production config

nuxt.config.ts构建>扩展中配置您的不同环境

nuxt.config.ts build extend envi

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

package.json中,将脚本配置为将在哪种环境下运行(例如npm run start将使用NODE_ENV=development,而defaults.json将与baseUrl: http://localhost:3000和{{ 1}}将npm run builddefaults.prod.json和其他配置一起使用

package.json cross env config

有关更多详细信息,您可以查看cross-env