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

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

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

Nginx配置Vue項目,無法按路徑跳轉(zhuǎn)及刷新404

當前已有PHP項目（ThinkPHP 5 框架，Laravel框架同理），由于PHP項目有多個模塊：admin、index、api等模塊，前端代碼又想和現(xiàn)有項目相同域名。

實現(xiàn)

在PHP項目的public目錄下創(chuàng)建h5文件夾；
Vue打包項目，使用history路由模式，運行的基礎(chǔ)路徑填：/h5/；
將打包好的Vue文件放置PHP項目下的public/h5下；
配置nginx偽靜態(tài)，配置如下：

location /h5 {
?? ?try_files $uri $uri/h5 /h5/index.html?$query_string;
}

這樣能解決無法按Url路徑跳轉(zhuǎn)頁面，以及刷新404的問題。

Nginx作為Vue項目服務(wù)器簡單配置

server {
    listen    80; #監(jiān)聽80端口
    server_name localhost;
    location / {
        root /xxxx/xxx/xxx; #你項目在系統(tǒng)中的路徑
        index index.html index.htm;
    }
}

一個簡單配置就玩了。

我這個項目有個特殊的地方，一個項目用了兩個后臺，請求的地址就不一樣，我是根據(jù)前端請求uri區(qū)別使用那個后端的。

比如瀏覽器http://localhost/system/user/list就使用 localhost:8080后臺，如果是http://localhost/business/xxxx就使用localhost:8081后臺，nginx配置如下：

server {
? ? listen ? ?80; #監(jiān)聽80端口
? ? server_name localhost;
? ? location / {
? ? ? ? root /xxxx/xxx/xxx; #你項目在系統(tǒng)中的路徑
? ? ? ? index index.html index.htm;
? ? }
? ? location /system {
? ? ? ? proxy_pass http://localhost:8080;
? ? }
? ? location /business {
? ? ? ? proxy_pass http://localhost:8081;
? ? }
}

重點重點重點

在配每一個跳轉(zhuǎn)時(/system) proxy_pass后面地址結(jié)尾是否帶斜杠"/"是不一樣的.

情況1 proxy_pass http://localhost:8081/; 結(jié)尾有斜杠
我請求/business/order/list 這個時, 最終跳轉(zhuǎn)的是 http://localhost:8081/order/list 不會把locahost后面匹配的字符串加到請求里
情況2 proxy_pass http://localhost:8081; 結(jié)尾沒有斜杠

我請求/business/order/list 這個時, 最終跳轉(zhuǎn)的是 http://localhost:8081/business/order/list .