我的Nuxt.js项目中有axios模块。
我还在localhost:4040/api
中设置了baseUrl(用于API),而我的客户端在端口3000上运行。
当我在API中获取图像数据时,它返回api服务器的相对路径,就像'/upload/1.png'
{
"src":"/upload/1.png"
}
因此,我需要获取axios baseUrl并将其与它连接以创建图像的完整路径。 除了硬编码之外,还有什么方法可以做到吗?
如果在nuxt.config.js中你定义:
axios: {
baseURL:"localhost:4040/api/"
}
您需要为图像做的只是指向它如下:
:src="`${$axios.defaults.baseURL}upload/1.png`"
您可以像这样访问axios配置来获取您的api基本URL:
this.$axios.defaults.baseURL
我遇到了类似的问题。我的解决步骤如下:在浏览器Changer中删除文件夹.nuxt +删除缓存
axios: {
baseURL: 'http: // localhost: 8080/api'
}
它按预期工作。在此之前,我尝试了许多方法,如社区教程,但没有效果。
你可以为axios设置基本网址
axios.defaults.baseURL = 'https://api.example.com/';
所以下次这个url将添加您调用api所需的路径
有关详细信息,请参阅以下链接
如果有人打算调用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'
},
对不起,如果答案不合适,但有人需要希望这能解释他们