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