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