vue項(xiàng)目與后端接口如何部署到同一域名
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)文章
Nuxt.js SSR與權(quán)限驗(yàn)證的實(shí)現(xiàn)
這篇文章主要介紹了Nuxt.js SSR與權(quán)限驗(yàn)證的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11
elementPuls 表格反選實(shí)現(xiàn)示例代碼
這篇文章主要介紹了elementPuls 表格反選實(shí)現(xiàn)示例代碼,本文通過示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-07-07
vue項(xiàng)目中使用pinyin轉(zhuǎn)換插件方式
這篇文章主要介紹了vue項(xiàng)目中使用pinyin轉(zhuǎn)換插件方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
keep-alive是Vue中的一個(gè)內(nèi)置組件,用于緩存非活動(dòng)組件實(shí)例,避免重復(fù)渲染,優(yōu)化性能,本文給大家介紹vue中的keep-alive用法指南,感興趣的朋友一起看看吧2024-10-10
本篇文章主要介紹了vuex 閑置狀態(tài)重置方案，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01
在vue3中對(duì)響應(yīng)式數(shù)據(jù)的聲明官方給出了ref()和reactive()這兩種方式,下面這篇文章主要給大家介紹了關(guān)于Vue3中ref與reactive的相關(guān)資料,需要的朋友可以參考下2021-06-06
這篇文章主要介紹了vue element-ui讀取pdf文件的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-11-11
vue如何實(shí)現(xiàn)角色權(quán)限的控制
關(guān)于角色與權(quán)限控制,通常是分為兩大類,一種是菜單權(quán)限,一種是操作權(quán)限,本文將深入探討如何通過?Vue?實(shí)現(xiàn)角色權(quán)限控制,特別是基于按鈕級(jí)別的權(quán)限控制,需要的可以了解下2025-02-02
vue結(jié)合echarts繪制一個(gè)支持切換的折線圖實(shí)例
這篇文章主要介紹了vue結(jié)合echarts繪制一個(gè)支持切換的折線圖實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要給大家介紹了關(guān)于如何一步步基于element-ui封裝查詢組件的相關(guān)資料,本文通過示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue.js具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2021-10-10