如何在nuxt中获取axios baseUrl?

vue.js Vue.js

泡芙

2020-03-23

我的Nuxt.js项目中有axios模块。
我还在localhost:4040/api客户端在端口3000上运行时设置了我的baseUrl(用于API)。
当我在API中获取图片数据时,它会返回api服务器的相对路径,例如“ /upload/1.png”
{ "src":"/upload/1.png" }

因此,我需要获取axios baseUrl并将其与它合并以创建图像的完整路径。
除了对其进行硬编码之外,还有其他方法吗?

第2703篇《如何在nuxt中获取axios baseUrl?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

3个回答
神乐 2020.03.23

您可以像这样访问axios配置来获取您的api基本URL:

this.$axios.defaults.baseURL
Davaid猪猪 2020.03.23

如果有人想知道如何使axios baseURL与域无关:

这是可以简单实现的方法:

axios: {
  baseURL: '/'
}

它将在localhost:3000/api以及any-domain.com/api

Stafan路易 2020.03.23

如果在nuxt.config.js中定义:

axios: {
  baseURL:"localhost:4040/api/"
}

对于图像,您需要做的只是指向它,如下所示:

:src="`${$axios.defaults.baseURL}upload/1.png`"

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android