blocks|key|349877|text|如果在nuxt.config.js中定义：|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|349878|axios:+{
++baseURL:"localhost:4040/api/"
}|code-block|syntax|javascript|349879|对图像所需做的就是将其指向如下：|349880|:src="`${$axios.defaults.baseURL}upload/1.png`"|349881|entityMap^0|3|E|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|P|$]]

If in nuxt.config.js you defined:

<pre><code>axios: {
 baseURL:"localhost:4040/api/"
}
</code></pre>

All you need to do for the image is to point to it as follows:

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

blocks|key|349838|text|您可以像这样访问axios配置以获得api基URL：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|349839|this.$axios.defaults.baseURL|code-block|syntax|javascript|349840|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You can access axios config like this to get your api base URL:

<pre><code>this.$axios.defaults.baseURL
</code></pre>

blocks|key|3680809|text|如果有人想知道如何使axios与baseURL域无关：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3680810|以下是如何简单地实现这一目标：|3680811|axios:+{
++baseURL:+'/'
}|code-block|syntax|javascript|3680812|它将在localhost:3000/api和any-domain.com/api上工作。|offset|length|style|CODE|3680813|entityMap^0|0|0|0|3|I|M|I|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@$K|U|L|V|M|N]|$K|W|L|X|M|N]]|9|@]|A|$]]|$1|O|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|P|$]]

In case if someone is wondering how to make an axios baseURL domain-independent:

Here is how simply it can be achieved:

<pre><code>axios: {
 baseURL: '/'
}
</code></pre>

It will work on <code>localhost:3000/api</code> as well as on <code>any-domain.com/api</code>

blocks|key|349900|text|我也有过类似的问题。我的解决步骤如下:删除文件夹.nuxt+%2B删除浏览器更改器中的缓存|type|unstyled|depth|inlineStyleRanges|entityRanges|data|349901|++axios:+{
+++++baseURL:+'http:+//+localhost:+8080/api'
+++}|code-block|syntax|javascript|349902|它如预期的那样工作。在此之前，我尝试了很多方法，比如社区教程，但效果不佳。|349903|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

I had a similar problem.
My resolution step is as follows:
Delete folder .nuxt + remove cache in browser
Changer

<pre><code> axios: {
 baseURL: 'http: // localhost: 8080/api'
 }
</code></pre>

It works as expected. Before that, I tried a lot of ways like community tutorials but not effective.

blocks|key|3680843|text|我有过这样的nuxt.config.js：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3680844|axios:+{
++++baseURL:+"http://localhost:8000/api/",
},|code-block|syntax|javascript|3680845|在我的一个组件中，我做了一个api调用，响应如下：|3680846|eachpost:+{
+++....
+++user:+{
++++++....,
++++++avatar:+'users/default.png'
+++}
}|3680847|这里，阿凡达对象有一个相对路径到我的图像，但在客户端，我必须有绝对路径到服务器。因此，我在我的组件中编写了下面的代码，它成功地工作了。我获得照片的绝对途径是：http://localhost:8000/storage/users/default.png|offset|length|style|BOLD|3680848|<img+:src="`${$axios.defaults.baseURL.slice(0,22)}storage/${eachPost.user.avatar}`"+:alt="`${eachPost.user.name}`">|3680849|entityMap|0|LINK|mutability|MUTABLE|url|http://localhost:8000/storage/users/default.png^0|0|0|0|0|27|1B|27|1B|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|12|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|13|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|14|8|@$M|15|N|16|O|P]]|9|@$M|17|N|18|1|19]]|A|$]]|$1|Q|3|R|5|D|7|1A|8|@]|9|@]|A|$E|F]]|$1|S|3|-4|5|6|7|1B|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]]]

I had nuxt.config.js like this:
<pre><code>axios: {
 baseURL: &quot;http://localhost:8000/api/&quot;,
},
</code></pre>
in one of my components, I made an api call which responded like:
<pre><code>eachpost: {
 ....
 user: {
 ....,
 avatar: 'users/default.png'
 }
}
</code></pre>
here avatar object has a relative path to my image, but in the client side, I must have the absolute path to the server.
so I wrote the below code in my component which worked successfully.
My absolute path to the photo was: http://localhost:8000/storage/users/default.png
<pre><code>&lt;img :src=&quot;`${$axios.defaults.baseURL.slice(0,22)}storage/${eachPost.user.avatar}`&quot; :alt=&quot;`${eachPost.user.name}`&quot;&gt;
</code></pre>

blocks|key|1064978|text|您可以为axios设置基url。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1064979|axios.defaults.baseURL+=+'https://api.example.com/'；|offset|length|1064980|因此，下次这个url将添加到调用api所需的路径中。|1064981|有关详细信息，请从下面的链接中看到。|1064982|https://github.com/axios/axios|1064983|entityMap|0|LINK|mutability|MUTABLE|url|https://api.example.com/|1^0|0|Q|O|0|0|0|0|0|U|1|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@$D|W|E|X|1|Y]]|A|$]]|$1|F|3|G|5|6|7|Z|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|10|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|11|8|@]|9|@$D|12|E|13|1|14]]|A|$]]|$1|L|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|M|$N|$5|O|P|Q|A|$R|S]]|T|$5|O|P|Q|A|$R|K]]]]

you can set base url for axios

axios.defaults.baseURL = '<a href="https://api.example.com/" rel="nofollow noreferrer">https://api.example.com/</a>';

so next time this url will be add with your required path for calling api

for details you can see from below link

<a href="https://github.com/axios/axios" rel="nofollow noreferrer">https://github.com/axios/axios</a>

blocks|key|1065099|text|如果有人打算调用axios，请通过调度存储/index.js调用它。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1065100|  +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);
      +}
}|code-block|syntax|javascript|1065101|模块文件member.js|1065102|  +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;
            +});
    +},|1065103|使用api文件nuxt.config.js配置|1065104|+axios:+{
++++baseURL:+'http://localhost:9020/api'
++},|1065105|如果答案不合适，很抱歉，但是需要有人希望这能解释他们|1065106|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|W|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|Y|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

If someone intends to call axios, call it via dispatch store/index.js

<pre><code>   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);
       }
}
</code></pre>

module file member.js

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

file nuxt.config.js config with axios api 

<pre><code> axios: {
 baseURL: 'http://localhost:9020/api'
 },
</code></pre>

Sorry if the answer is not appropriate but someone will need to hope that this explains them

blocks|key|349938|text|您只需将您的axios+url附加到window.location.origin|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|349939|entityMap^0|I|M|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

You just append <code>window.location.origin</code> with your axios url

I have axios module in my Nuxt.js project. 
I also set up my baseUrl (for API) in <code>localhost:4040/api</code> while my client is running on port 3000. 
When I fetch image data in the API, it returns a relative path to the api server which is like '/upload/1.png' 
<code>
{
 "src":"/upload/1.png"
}
</code>

So, I need to get the axios baseUrl and concat it with it to make full path to the image. 
Is there any way to do it other than hardcoding it?

How to get axios baseUrl in nuxt?

33 天实现自己的 AI 进化论？发文瓜分机械键盘、耳机等万元奖池！点击参加活动：<a href="https://cloud.tencent.com/developer/article/2503022" target="_blank">https://cloud.tencent.com/developer/article/2503022</a> 
 <img src="https://qcloudimg.tencent-cloud.cn/raw/01543e0407db10898a7ee9f420794432.jpg"/>

技术创作特训营有奖征文

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋 

腾讯云AI代码助手

CODING DevOps

Cloud Studio

SDK中心

API中心

命令行工具

文章&问答评论现已支持表情

我的Nuxt.js项目中有axios模块。当我的客户端在端口3000上运行时，我还在localhost:4040/api中设置了localhost:4040/api (for )。当我在API中获取图像数据时，它会返回到api服务器的一个相对路径，类似于'/upload/1.png‘{     "src":"/upload/1.png" }因此，我需要获得axios baseUrl并将其与之连接，

问如何在nuxt中获得axios？
EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在nuxt中获得axios？EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在nuxt中获得axios？
EN