針對Vue路由history模式下Nginx后臺配置操作
更新時間：2020年10月22日 08:40:27 作者：喵大叔、
這篇文章主要介紹了針對Vue路由history模式下Nginx后臺配置操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
前端將vue路由模式改為history模式后需要運維配置才能正常訪問，配置信如下
location / {
root html;
index index.html index.htm;
try_files $uri $uri/ @rewrites;
}
location @rewrites {
rewrite ^(.+)$ /index.html last;
}
經(jīng)測試，可以正常訪問
補充知識：Vue History 模式下 整合Nginx部署踩坑過程
在公司部署Vue項目期間，因Vue的Router下的Hash模式的#號太過于難看，就去把模式改為了history模式，誰想打包后出現(xiàn)了無盡的深淵，各種問題浮現(xiàn)：
問題一：
通過history模式打包后，部署到nginx服務器內(nèi)出現(xiàn)了，無法路由的問題，頁面展示空白頁，
之前用hash模式直接用nginx部署采用查詢root方式直接跳轉(zhuǎn)，hash模式下沒出現(xiàn)過問題，但是
此處的history模式直接就展現(xiàn)了空白頁，無法進行路由，查看了官網(wǎng)說明：
解決辦法：
此處我采用了Nginx服務器進行配置：
文檔配置：
我的配置：
我使用的根目錄為 /v/maintain/
Vue-Cli 3.0修改根目錄的方法：
修改完根目錄后需要修改 Router 的base目錄：
那么完美解決白屏無法路由問題。
以后有問題還是要以官方文檔為主，百度很多說明都比較籠統(tǒng)，不細化。
好啦~這篇針對Vue路由history模式下Nginx后臺配置操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue實戰(zhàn)教程之仿肯德基宅急送App，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-07-07
這篇文章主要介紹了Vue?各種loader的基本配置與使用，本文結(jié)合示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-01-01
這篇文章主要介紹了vue a標簽點擊實現(xiàn)賦值方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
這篇文章主要介紹了keep-alive不能緩存多層級路由菜單問題解決，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-03-03
在開發(fā)過程中,有時候會遇到這么一種情況,通過動態(tài)的賦值,但是dom沒有及時更新,能夠獲取到動態(tài)賦的值,但是無法獲取到雙向綁定的dom節(jié)點,這就需要我們手動進行強制刷新組件,下面這篇文章主要給大家介紹了關(guān)于vue組件強制刷新的4種方案,需要的朋友可以參考下2023-05-05
vuejs2.0實現(xiàn)分頁組件使用$emit進行事件監(jiān)聽數(shù)據(jù)傳遞的方法
這篇文章主要介紹了vuejs2.0實現(xiàn)分頁組件使用$emit進行事件監(jiān)聽數(shù)據(jù)傳遞的方法，非常不錯，具有參考借鑒價值，,需要的朋友可以參考下2017-02-02
axios 是一個基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端。這篇文章主要介紹了vue axios 簡單封裝以及思考 ,需要的朋友可以參考下2018-10-10
Vue的移動端多圖上傳插件vue-easy-uploader的示例代碼
這篇文章主要介紹了Vue的移動端多圖上傳插件vue-easy-uploader的示例代碼,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
使用vuex的時候,出現(xiàn)this.$store為undefined問題
這篇文章主要介紹了使用vuex的時候,出現(xiàn)this.$store為undefined問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
今天小編就為大家分享一篇快速解決vue在ios端下點擊響應延時的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08