快捷導(dǎo)航

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

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

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

Nginx配置Vue項(xiàng)目,無(wú)法按路徑跳轉(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;
}

這樣能解決無(wú)法按Url路徑跳轉(zhuǎn)頁(yè)面，以及刷新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 .