vue項(xiàng)目與后端接口如何部署到同一域名
更新時(shí)間：2025年06月21日 10:50:10 作者：新佳
這篇文章主要介紹了vue項(xiàng)目與后端接口如何部署到同一域名的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
vue項(xiàng)目與后端接口部署到同一域名
Nginx配置兩個(gè)地方就行
先是配置好自己項(xiàng)目的服務(wù)，確保自己的項(xiàng)目能運(yùn)行：
location / {
root /web/xiangmu/public; // 本地項(xiàng)目的路徑
index index.html index.php;
}
再是配置接口請(qǐng)求后端
location /api/ {
proxy_pass http://192.168.1.1:8000;（后端接口地址，注意端口號(hào)）
proxy_set_header Host $HOST;
}
注意點(diǎn)（后端接口配置）
后端需要單獨(dú)啟動(dòng)一個(gè)服務(wù)（如果是TP 有swoole, 可以配置一個(gè)后端服務(wù)。詳情看手冊(cè) ）
php think swoole:server
如果你的配置出現(xiàn)404了，這個(gè)時(shí)候你可以對(duì)照檢查下面的問題是不是你遇到的。
proxy_pass 地址后面要不要加“/”,這個(gè)取決于匹配的 /api/ 作不作為你uri的一部分，如果 /api/ 是其中一部分,則不需要帶上“/”；反之帶上。
加了“/”相當(dāng)于是絕對(duì)根路徑，nginx 不會(huì)把location 中匹配的路徑 /api/ 帶上。
[舉個(gè)列子,加了/]
- 請(qǐng)求地址原本是這樣： http://192.168.1.1/api/a.html;
- 如果配置是這樣：proxy_pass http://192.168.1.1/;（后端接口地址）
- 那么請(qǐng)求接口地址應(yīng)該變成這樣： http://192.168.1.1/a.html
proxy_pass的地址記得在hosts文件做ip映射，建議直接使用域名對(duì)應(yīng)的ip地址。
location 中 ~ （區(qū)分大小寫）與 ~* （不區(qū)分大小寫）標(biāo)識(shí)均為正則匹配。
如果你不確定，請(qǐng)?jiān)趌ocation后面加上 location ~* /api/ { }這樣的配置（目的：不區(qū)分“api”三個(gè)字母的大小寫）。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了如何利用vue實(shí)現(xiàn)前端列表拖拽功能,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,有需要的小伙伴可以參考一下2023-12-12
這篇文章主要介紹了Vue如何指定不編譯的文件夾和favicon.ico，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了Element PageHeader頁(yè)頭的使用方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
下面小編就為大家分享一篇基于vue中css預(yù)加載使用sass的配置方式詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
使用Vue中 v-for循環(huán)列表控制按鈕隱藏顯示功能
這篇文章主要介紹了使用Vue中 v-for循環(huán)列表控制按鈕隱藏顯示功能,需要的朋友可以參考下2019-04-04
vue computed計(jì)算屬性顯示undefined的解決
這篇文章主要介紹了vue computed計(jì)算屬性顯示undefined的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
在Vue 中實(shí)現(xiàn)循環(huán)渲染多個(gè)相同echarts圖表
這篇文章主要介紹了在Vue 中實(shí)現(xiàn)循環(huán)渲染多個(gè)相同echarts圖表，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07
文章介紹了Vue中組件的基本使用、定義、注冊(cè)、書寫標(biāo)簽和嵌套等關(guān)鍵步驟和注意事項(xiàng),詳細(xì)解釋了組件的配置選項(xiàng)、如何通過Vue.extend創(chuàng)建組件以及組件實(shí)例對(duì)象與Vue實(shí)例對(duì)象的區(qū)別,還提及了單文件組件的結(jié)構(gòu)和編寫邏輯,并強(qiáng)調(diào)了組件原型鏈的重要性2025-10-10
vue簡(jiǎn)單的二維數(shù)組循環(huán)嵌套方式
這篇文章主要介紹了vue簡(jiǎn)單的二維數(shù)組循環(huán)嵌套方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue之prop與$emit的用法說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04