blocks|key|743474|text|您可以这样做的一种方法是在页面的头部添加一个元标记(就像您对csrf所做的那样)，然后在您的bootstrap.js文件中引用它：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|743475|头|BOLD|743476|<meta+name="api-base-url"+content="{{+url('demos/app')+}}"+/>|code-block|syntax|javascript|743477|bootstrap.js+(在window.axios+=+require('axios');下面)|743478|window.axios.defaults.baseURL+=+document.head.querySelector('meta[name="api-base-url"]').content;|743479|希望这能有所帮助！|743480|entityMap^0|1A|C|0|0|1|0|0|0|C|F|W|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@$9|W|A|X|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Y|8|@$9|Z|A|10|B|H]]|D|@]|E|$]]|$1|I|3|J|5|K|7|11|8|@]|D|@]|E|$L|M]]|$1|N|3|O|5|6|7|12|8|@$9|13|A|14|B|H]|$9|15|A|16|B|C]]|D|@]|E|$]]|$1|P|3|Q|5|K|7|17|8|@]|D|@]|E|$L|M]]|$1|R|3|S|5|6|7|18|8|@]|D|@]|E|$]]|$1|T|3|-4|5|6|7|19|8|@]|D|@]|E|$]]]|U|$]]

One way you could go about this is to add a meta tag to the head of your page (like you may do with the csrf) and then reference it in your <code>bootstrap.js</code> file:

head

<pre><code>&lt;meta name="api-base-url" content="{{ url('demos/app') }}" /&gt;
</code></pre>

bootstrap.js (underneath <code>window.axios = require('axios');</code>)

<pre><code>window.axios.defaults.baseURL = document.head.querySelector('meta[name="api-base-url"]').content;
</code></pre>

Hope this helps!

blocks|key|722219|text|在config.js中：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|722220|const+CONFIG+=+{
++API_URL_ROOT:+'http://localhost:8000/api/v1/',
}

export+default+CONFIG;|code-block|syntax|javascript|722221|可以设置axios默认值，如下所示：|722222|import+config+from+'../config.js';

axios.create({
++baseURL:+config.API_BASE_URL
});|722223|或者您可以通过从API_BASE_URL导入config来设置路径，然后每次使用axios进行get/post/put/delete调用时都指向它。|offset|length|style|CODE|722224|entityMap^0|0|0|0|0|8|C|M|6|14|5|1B|J|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|@$M|X|N|Y|O|P]|$M|Z|N|10|O|P]|$M|11|N|12|O|P]|$M|13|N|14|O|P]]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|R|$]]

In config.js:

<pre><code>const CONFIG = {
 API_URL_ROOT: 'http://localhost:8000/api/v1/',
}

export default CONFIG;
</code></pre>

You can set axios default like this:

<pre><code>import config from '../config.js';

axios.create({
 baseURL: config.API_BASE_URL
});
</code></pre>

Or you can just set path by importing <code>API_BASE_URL</code> from <code>config</code> and then point it each time you make a <code>get/post/put/delete</code> call using <code>axios</code>

blocks|key|722326|text|Laravel附带了axios及其在bootstrap.js中导入的axios，因此只需转到bootstrap.js并添加如下内容：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|722327|window.axios.defaults.baseURL+=+'http://example.test';|code-block|syntax|javascript|722328|您可以在window.axios.defaults.headers.common行之后添加这个|722329|-Additional信息：|722330|axios.create将创建一个具有自己的全局url和配置的实例。如果您有多个urls或配置，并且希望在不同的组件中使用它，请使用它。|722331|entityMap^0|I|C|1A|C|0|0|4|10|0|0|0|C|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]|$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|Y|8|@$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|M|3|N|5|6|7|11|8|@]|D|@]|E|$]]|$1|O|3|P|5|6|7|12|8|@$9|13|A|14|B|C]]|D|@]|E|$]]|$1|Q|3|-4|5|6|7|15|8|@]|D|@]|E|$]]]|R|$]]

Laravel ships with axios and its imported in <code>bootstrap.js</code>, so simply go to <code>bootstrap.js</code> and add this:

<pre><code>window.axios.defaults.baseURL = 'http://example.test';
</code></pre>

You can add this after <code>window.axios.defaults.headers.common</code> line
 
 
-Additional information:

<code>axios.create</code> will make an instance that has its own global url and configurations. use this if you have multiple urls or configuration and you want to use it in different components.

blocks|key|743499|text|在Project根目录中创建vue.config.js+(如果不存在)-|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|743500|在vue.config.js中-|743501|module.exports+=+{
++++publicPath:+process.env.NODE_ENV+===+'production'
++++++++?+'/demos/app/'
++++++++:+'/'
}|code-block|syntax|javascript|743502|然后，在resources/js/bootstrap.js中添加行-|743503|const+{publicPath}+=+require("../../vue.config");
window.axios.defaults.baseURL+=+publicPath|743504|entityMap^0|E|D|0|1|D|0|0|4|P|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|V|8|@$9|W|A|X|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|Y|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|Z|8|@$9|10|A|11|B|C]]|D|@]|E|$]]|$1|O|3|P|5|J|7|12|8|@]|D|@]|E|$K|L]]|$1|Q|3|-4|5|6|7|13|8|@]|D|@]|E|$]]]|R|$]]

Create <code>vue.config.js</code> in Project root directory( if not exist ) -
In <code>vue.config.js</code> -
<pre><code>module.exports = {
 publicPath: process.env.NODE_ENV === 'production'
 ? '/demos/app/'
 : '/'
}
</code></pre>
Then, Add the line in <code>resources/js/bootstrap.js</code> -
<pre><code>const {publicPath} = require(&quot;../../vue.config&quot;);
window.axios.defaults.baseURL = publicPath
</code></pre>

blocks|key|743511|text|.env|type|unstyled|depth|inlineStyleRanges|entityRanges|data|743512|MIX_APP_URL="${APP_URL}"|code-block|syntax|javascript|743513|资源/js/bootstrap.js|743514|window.axios+=+require('axios');
window.axios.defaults.baseURL+=+process.env.MIX_APP_URL;|743515|在.env文件中更新您的.env，并在各自的文件上添加上述代码。|offset|length|style|BOLD|743516|entityMap^0|0|0|0|0|1|4|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|@$M|X|N|Y|O|P]]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

.env
<pre><code>MIX_APP_URL=&quot;${APP_URL}&quot;
</code></pre>
resources/js/bootstrap.js
<pre><code>window.axios = require('axios');
window.axios.defaults.baseURL = process.env.MIX_APP_URL;
</code></pre>
Update your APP_URL in .env file and add the above code on respective files.

I've deployed a VueJS project to a domain like <code>www.example.com/demos/app,
</code>
But when I send a request to api from axios it is pointing to <code>www.example.com/login</code> instead of <code>www.example.com/demos/app/login
</code>

Here is my request code using <code>axios</code>

<pre><code>export const login = ({ dispatch }, { payload, context }) =&gt; {
 return axios.post('/login', payload).then((response) =&gt; {
 // do something
 }).catch((error) =&gt; {
 // handle erros
 })
}
</code></pre>

How to set root/base url for a laravel-vujs project?

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

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

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

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

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

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

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

我已经将VueJS项目部署到像www.example.com/demos/app,这样的域，但是当我从axios向api发送请求时，它是指向www.example.com/login而不是www.example.com/demos/app/login下面是使用axios的请求代码export const login = ({ dispatch }, { payload, context }) =>

问如何为laravel-vujs项目设置根/基url？
EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何为laravel-vujs项目设置根/基url？EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何为laravel-vujs项目设置根/基url？
EN