apache和nginx下vue頁面刷新404的解決方案
問題描述
記錄一個(gè)新手很容易遇見的問題，vue的項(xiàng)目，在打包前本地cli模式運(yùn)行沒有任何問題，但是打包完在apache或者nginx中配置了域名后，項(xiàng)目會(huì)出現(xiàn)刷新后404的奇怪問題
原因
vue-router的mode使用了history模式，默認(rèn)應(yīng)該是hash模式。
一般都會(huì)因?yàn)閔ash模式的url不夠美觀，都用的history模式，而問題是由于history模式引起的。
history模式下的url并不是真實(shí)存在的，所以刷新后會(huì)找不到。
當(dāng)你打包了項(xiàng)目后，一般默認(rèn)會(huì)生成一個(gè)dist文件夾，文件夾下有且只有一個(gè)index.html文件。
并且vue是單頁應(yīng)用，因此我們可以認(rèn)為所有的url路徑其實(shí)都應(yīng)該指向index.html的，至于路徑vue會(huì)用獨(dú)有的路由解析方式把他解析到對(duì)應(yīng)的js文件，然后js把文件中的html模塊渲染到index,html中，實(shí)現(xiàn)頁面的展示，所以不要被路徑所迷惑，
你可以把url路徑理解為vue匹配頁面所需要的參數(shù)，但是這個(gè)url路徑如果你直接訪問或者刷新，不管是apache還是nginx都無法去匹配到這個(gè)url路徑，因?yàn)樗淮嬖冢晕覀兇藭r(shí)就要在apache或者nginx配置一下偽靜態(tài)，讓每個(gè)url路徑都指向index.html就可以了。
偽靜態(tài)配置
apache偽靜態(tài)配置
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>nginx偽靜態(tài)配置
location / {
......
try_files $uri $uri/ /index.html;
}總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vuedraggable+element ui實(shí)現(xiàn)頁面控件拖拽排序效果
這篇文章主要為大家詳細(xì)介紹了vuedraggable+element ui實(shí)現(xiàn)頁面控件拖拽排序效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-12-12
這篇文章主要介紹了vue中的主動(dòng)觸發(fā)點(diǎn)擊事件，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
詳解element-ui 組件el-autocomplete使用踩坑記錄
最近使用了el-autocomplete組件，本文主要介紹了element-ui 組件el-autocomplete使用踩坑記錄，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
本篇文章主要介紹了Vue中的v-cloak使用解讀，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-03-03
Vue項(xiàng)目每次發(fā)版后要清理瀏覽器緩存問題解決辦法
最近項(xiàng)目更新頻繁,每次一更新客戶都說還跟之前的一樣,一查原因是因?yàn)榭蛻魶]有清空瀏覽器的緩存,所以為了方便客戶看到最新版本,開始調(diào)研再發(fā)布新版本后自動(dòng)清理緩存,這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目每次發(fā)版后要清理瀏覽器緩存問題的解決辦法,需要的朋友可以參考下2024-02-02
這篇文章主要介紹了Vue.directive 自定義指令的問題小結(jié),需要的朋友可以參考下2018-03-03
移動(dòng)端Vue2.x Picker的全局調(diào)用實(shí)現(xiàn)
這篇文章主要介紹了移動(dòng)端Vue2.x Picker的全局調(diào)用實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
vue 組件數(shù)據(jù)加載解析順序的詳細(xì)代碼
Vue.js的解析順序可以概括為:模板編譯、組件創(chuàng)建、數(shù)據(jù)渲染、事件處理和生命周期鉤子函數(shù)執(zhí)行,接下來通過本文給大家介紹vue 組件數(shù)據(jù)加載解析順序的完整代碼,感興趣的朋友跟隨小編一起看看吧2024-03-03
vue中多個(gè)倒計(jì)時(shí)實(shí)現(xiàn)代碼實(shí)例
這篇文章主要介紹了vue中多個(gè)倒計(jì)時(shí)實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
詳解在vue-cli項(xiàng)目中安裝node-sass
本篇文章主要介紹了詳解在vue-cli項(xiàng)目中安裝node-sass ，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-06-06