如何在nuxt中获取axios baseUrl？答案

【问题标题】：How to get axios baseUrl in nuxt?如何在nuxt中获取axios baseUrl？
【发布时间】：2019-01-24 18:54:30
【问题描述】：

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

所以，我需要获取 axios baseUrl 并将其与它连接以创建图像的完整路径。
除了硬编码还有什么办法吗？

【问题讨论】：

你想用"src":"/upload/1.png"做什么
@Helpinghand 我想显示图像，因为它们运行在不同的端口（api 和客户端）上，我不能使用相对路径

标签： vue.js axios nuxt.js

【解决方案1】：

如果您在 nuxt.config.js 中定义：

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

你需要为图像做的就是如下指向它：

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

【讨论】：

赞成，非常好奇的问题，如果 axios 默认已经有一个 baseUrl，为什么要在 nuxt config.js 中显式设置它我已经看到几乎每个 nuxt 示例都这样做

【解决方案2】：

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

this.$axios.defaults.baseURL

【讨论】：

【解决方案3】：

如果有人想知道如何使 axios baseURL 域独立：

这是实现它的简单方法：

axios: {
  baseURL: '/'
}

它适用于localhost:3000/api 以及any-domain.com/api

【讨论】：

你节省了我的时间！非常感谢
这应该有更多的赞成票。在运行时处理 nuxt 中的 baseUrl 确实很乏味。
对我来说，当我尝试这样做时它会调用http:/api/user >:-(

【解决方案4】：

我遇到了类似的问题。我的解决步骤如下：删除文件夹 .nuxt + 删除浏览器中的缓存换机

  axios: {
     baseURL: 'http: // localhost: 8080/api'
   }

它按预期工作。在此之前，我尝试了很多社区教程之类的方法，但都没有效果。

【讨论】：

【解决方案5】：

你可以为 axios 设置基本 url

axios.defaults.baseURL = 'https://api.example.com/';

所以下次这个url会加上你调用api所需的路径

详情请见下方链接

https://github.com/axios/axios

【讨论】：

【解决方案6】：

如果有人要调用axios，通过dispatch store/index.js调用

   export const actions = {
     // nuxt server Init only works on store/index.js
     async nuxtServerInit ({dispatch}) {
         let response = await dispatch ('member / list', {page: 1});
         console.log (response);
       }
}

模块文件 member.js

   async list ({commit}, payload) {
         return await this. $ axios. $ post ('/ user / list', payload) .then ((response) => {
             commit ('fetchSuccess', response);
             return response;
             })
             .catch (error => {
                 return error.response.data;
             });
     },

使用 axios api 文件 nuxt.config.js 配置

 axios: {
    baseURL: 'http://localhost:9020/api'
  },

对不起，如果答案不合适，但有人需要希望这能解释他们

【讨论】：

【解决方案7】：

我有这样的 nuxt.config.js：

axios: {
    baseURL: "http://localhost:8000/api/",
},

在我的一个组件中，我进行了一个 api 调用，响应如下：

eachpost: {
   ....
   user: {
      ....,
      avatar: 'users/default.png'
   }
}

这里的头像对象有我的图片的相对路径，但是在客户端，我必须有服务器的绝对路径。所以我在我的组件中编写了以下代码，它成功运行。我的照片的绝对路径是：http://localhost:8000/storage/users/default.png

<img :src="`${$axios.defaults.baseURL.slice(0,22)}storage/${eachPost.user.avatar}`" :alt="`${eachPost.user.name}`">

【讨论】：