快捷導(dǎo)航

Nginx配置Vue項(xiàng)目,無法按路徑跳轉(zhuǎn)及刷新404的解決方案

更新時(shí)間：2023年06月30日 10:37:23 作者：Coder_C_1024

這篇文章主要介紹了Nginx配置Vue項(xiàng)目,無法按路徑跳轉(zhuǎn)及刷新404的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

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è)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(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)用后端接口的坑及解決
這篇文章主要介紹了Vue中使用axios調(diào)用后端接口的坑及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-03-03
vue vant Area組件使用詳解
這篇文章主要介紹了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)判斷展示方式
這篇文章主要介紹了vue基于elementUI表格狀態(tài)判斷展示方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10