如何获得爱可信的baseUrl在NuxT？

Question

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

{
    "src":"/upload/1.png"
}

因此，我需要获取axios baseUrl并将其与它连接以创建图像的完整路径。 除了硬编码之外，还有什么方法可以做到吗？

Answer 1

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

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

您需要为图像做的只是指向它如下：

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

Answer 2

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

this.$axios.defaults.baseURL

Answer 3

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

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

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

Answer 4

你可以为axios设置基本网址

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

所以下次这个url将添加您调用api所需的路径

有关详细信息，请参阅以下链接

https://github.com/axios/axios

Answer 5

如果有人打算调用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'
  },

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