欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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 .

總結(jié)

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關(guān)文章

  • vue多頁面項目中路由使用history模式的方法

    vue多頁面項目中路由使用history模式的方法

    這篇文章主要介紹了vue多頁面項目中路由如何使用history模式，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-09-09
  • vue-cli如何修改打包項目結(jié)構(gòu)及前綴

    vue-cli如何修改打包項目結(jié)構(gòu)及前綴

    這篇文章主要介紹了vue-cli如何修改打包項目結(jié)構(gòu)及前綴問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2023-07-07
  • Vue3項目實現(xiàn)前端導出Excel的示例代碼

    Vue3項目實現(xiàn)前端導出Excel的示例代碼

    這篇文章主要介紹了Vue3項目實現(xiàn)前端導出Excel的示例,在vue3的項目中導出Excel表格的功能,可以借助xlsx庫來實現(xiàn),下面是詳細的操作步驟,需要的朋友可以參考下
    2025-01-01
  • 使用vue-cli創(chuàng)建項目的圖文教程(新手入門篇)

    使用vue-cli創(chuàng)建項目的圖文教程(新手入門篇)

    這篇文章主要介紹了新手入門vue 使用vue-cli創(chuàng)建項目的圖文教程，本文是針對完全不了解過vue和npm的小白而寫的,需要的朋友可以參考下
    2018-05-05
  • Vue中使用axios調(diào)用后端接口的坑及解決

    Vue中使用axios調(diào)用后端接口的坑及解決

    這篇文章主要介紹了Vue中使用axios調(diào)用后端接口的坑及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2022-03-03
  • vue vant Area組件使用詳解

    vue vant Area組件使用詳解

    這篇文章主要介紹了vue vant Area組件使用詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
    2019-12-12
  • vue實現(xiàn)父子組件雙向綁定的方法總結(jié)

    vue實現(xiàn)父子組件雙向綁定的方法總結(jié)

    Vue.js 是一種流行的 JavaScript 框架,它提供了一種簡單且高效的方式來構(gòu)建用戶界面,在 Vue 中,父子組件之間的雙向綁定是一種常見的需求,下面我們就來學習一下vue中父子組件雙向綁定的常用方法吧
    2023-10-10
  • 項目中一鍵添加husky實現(xiàn)詳解

    項目中一鍵添加husky實現(xiàn)詳解

    這篇文章主要為大家介紹了項目中一鍵添加husky實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
    2022-09-09
  • Vue組件間通信方法總結(jié)（父子組件、兄弟組件及祖先后代組件間）

    Vue組件間通信方法總結(jié)（父子組件、兄弟組件及祖先后代組件間）

    這篇文章主要給大家介紹了關(guān)于Vue組件間通信的相關(guān)資料，其中包括父子組件、兄弟組件及祖先后代組件間的通信，文中通過示例代碼介紹的非常詳細，對大家學習或者使用Vue具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧
    2019-04-04
  • vue基于elementUI表格狀態(tài)判斷展示方式

    vue基于elementUI表格狀態(tài)判斷展示方式

    這篇文章主要介紹了vue基于elementUI表格狀態(tài)判斷展示方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-10-10

最新評論