Nginx配置Vue項(xiàng)目,無法按路徑跳轉(zhuǎn)及刷新404的解決方案
Nginx配置Vue項(xiàng)目,無法按路徑跳轉(zhuǎn)及刷新404
當(dāng)前已有PHP項(xiàng)目（ThinkPHP 5 框架，Laravel框架同理），由于PHP項(xiàng)目有多個(gè)模塊：admin、index、api等模塊，前端代碼又想和現(xiàn)有項(xiàng)目相同域名。
實(shí)現(xiàn)
- 在PHP項(xiàng)目的public目錄下創(chuàng)建h5文件夾；
- Vue打包項(xiàng)目，使用history路由模式，運(yùn)行的基礎(chǔ)路徑填：/h5/；
- 將打包好的Vue文件放置PHP項(xiàng)目下的public/h5下；
- 配置nginx偽靜態(tài)，配置如下：
location /h5 {
?? ?try_files $uri $uri/h5 /h5/index.html?$query_string;
}這樣能解決無法按Url路徑跳轉(zhuǎn)頁面，以及刷新404的問題。
Nginx作為Vue項(xiàng)目服務(wù)器簡(jiǎn)單配置
server {
listen 80; #監(jiān)聽80端口
server_name localhost;
location / {
root /xxxx/xxx/xxx; #你項(xiàng)目在系統(tǒng)中的路徑
index index.html index.htm;
}
}一個(gè)簡(jiǎn)單配置就玩了。
我這個(gè)項(xiàng)目有個(gè)特殊的地方，一個(gè)項(xiàng)目用了兩個(gè)后臺(tái)，請(qǐng)求的地址就不一樣，我是根據(jù)前端請(qǐng)求uri區(qū)別使用那個(gè)后端的。
比如瀏覽器http://localhost/system/user/list就使用 localhost:8080后臺(tái)，如果是http://localhost/business/xxxx就使用localhost:8081后臺(tái)，nginx配置如下：
server {
? ? listen ? ?80; #監(jiān)聽80端口
? ? server_name localhost;
? ? location / {
? ? ? ? root /xxxx/xxx/xxx; #你項(xiàng)目在系統(tǒng)中的路徑
? ? ? ? index index.html index.htm;
? ? }
? ? location /system {
? ? ? ? proxy_pass http://localhost:8080;
? ? }
? ? location /business {
? ? ? ? proxy_pass http://localhost:8081;
? ? }
}重點(diǎn)重點(diǎn)重點(diǎn)
在配每一個(gè)跳轉(zhuǎn)時(shí)(/system) proxy_pass后面地址結(jié)尾是否帶斜杠"/"是不一樣的.
- 情況1 proxy_pass http://localhost:8081/; 結(jié)尾有斜杠
- 我請(qǐng)求/business/order/list 這個(gè)時(shí), 最終跳轉(zhuǎn)的是 http://localhost:8081/order/list 不會(huì)把locahost后面匹配的字符串加到請(qǐng)求里
- 情況2 proxy_pass http://localhost:8081; 結(jié)尾沒有斜杠
我請(qǐng)求/business/order/list 這個(gè)時(shí), 最終跳轉(zhuǎn)的是 http://localhost:8081/business/order/list .
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
- vue-router使用next()跳轉(zhuǎn)到指定路徑時(shí)會(huì)無限循環(huán)問題
- vue中@路徑無法跳轉(zhuǎn)到指定文件的解決
- vue-router解決相同路徑跳轉(zhuǎn)報(bào)錯(cuò)的問題
- 解決vue項(xiàng)目路徑不正確,自動(dòng)跳轉(zhuǎn)404的問題
- vue-router嵌套路由方式(頁面路徑跳轉(zhuǎn)但頁面顯示空白)
- vue路由相對(duì)路徑跳轉(zhuǎn)方式
- vue-router重寫push方法,解決相同路徑跳轉(zhuǎn)報(bào)錯(cuò)問題
- vue頁面不能根據(jù)路徑進(jìn)行跳轉(zhuǎn)的解決方法
相關(guān)文章
vue多頁面項(xiàng)目中路由使用history模式的方法
這篇文章主要介紹了vue多頁面項(xiàng)目中路由如何使用history模式，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-09-09
vue-cli如何修改打包項(xiàng)目結(jié)構(gòu)及前綴
這篇文章主要介紹了vue-cli如何修改打包項(xiàng)目結(jié)構(gòu)及前綴問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
Vue3項(xiàng)目實(shí)現(xiàn)前端導(dǎo)出Excel的示例代碼
這篇文章主要介紹了Vue3項(xiàng)目實(shí)現(xiàn)前端導(dǎo)出Excel的示例,在vue3的項(xiàng)目中導(dǎo)出Excel表格的功能,可以借助xlsx庫來實(shí)現(xiàn),下面是詳細(xì)的操作步驟,需要的朋友可以參考下2025-01-01
使用vue-cli創(chuàng)建項(xiàng)目的圖文教程(新手入門篇)
這篇文章主要介紹了新手入門vue 使用vue-cli創(chuàng)建項(xiàng)目的圖文教程，本文是針對(duì)完全不了解過vue和npm的小白而寫的,需要的朋友可以參考下2018-05-05
這篇文章主要介紹了Vue中使用axios調(diào)用后端接口的坑及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要介紹了vue vant Area組件使用詳解，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
vue實(shí)現(xiàn)父子組件雙向綁定的方法總結(jié)
Vue.js 是一種流行的 JavaScript 框架,它提供了一種簡(jiǎn)單且高效的方式來構(gòu)建用戶界面,在 Vue 中,父子組件之間的雙向綁定是一種常見的需求,下面我們就來學(xué)習(xí)一下vue中父子組件雙向綁定的常用方法吧2023-10-10
項(xiàng)目中一鍵添加husky實(shí)現(xiàn)詳解
這篇文章主要為大家介紹了項(xiàng)目中一鍵添加husky實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
Vue組件間通信方法總結(jié)（父子組件、兄弟組件及祖先后代組件間）
這篇文章主要給大家介紹了關(guān)于Vue組件間通信的相關(guān)資料，其中包括父子組件、兄弟組件及祖先后代組件間的通信，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要介紹了vue基于elementUI表格狀態(tài)判斷展示方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10