當你使用 history 模式時，url就像正常的url，例如 “http://yoursite.com/mapp/subpage”，不過這種模式還需要后臺配置支持。因為我們的應用是單頁面應用，如果后臺沒有正確的配置，當用戶在瀏覽器直接訪問 "http://yoursite.com/mapp/subpage"就會返回 404。對于后臺如何配置支持，官網:https://router.vuejs.org/zh/guide/essentials/history-mode.html提供的Nginx配置方案:

location / {try_files $uri $uri/ /index.html; }

子目錄部署

若項目沒有直接部署在Nginx主目錄下,而是在其子目錄，如：
Nginx配置root路徑為:/usr/local/nginx/html，子目錄路徑為：/usr/local/nginx/html/your_folder,此時Nginx應該這樣配置:

location / {try_files $uri $uri/ /your_folder/index.html; }

Nginx 轉發時Header中信息丟失

通過Nginx轉發后, Header中access_token信息丟失，經查，發現Nginx在轉發時，header中帶下劃線_的屬性默認不轉發，需要增加配置

underscores_in_headers on; server {listen 80;server_name 127.0.0.1;#charset koi8-r;#access_log logs/host.access.log main;underscores_in_headers on;...(其他略) }

官網： https://router.vuejs.org/zh/guide/essentials/history-mode.html

總結

以上是生活随笔為你收集整理的vue history模式Nginx配置的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。