apache和nginx下vue頁面刷新404的解決方案
問題描述
記錄一個新手很容易遇見的問題，vue的項目，在打包前本地cli模式運行沒有任何問題，但是打包完在apache或者nginx中配置了域名后，項目會出現(xiàn)刷新后404的奇怪問題
原因
vue-router的mode使用了history模式，默認(rèn)應(yīng)該是hash模式。
一般都會因為hash模式的url不夠美觀，都用的history模式，而問題是由于history模式引起的。
history模式下的url并不是真實存在的，所以刷新后會找不到。
當(dāng)你打包了項目后，一般默認(rèn)會生成一個dist文件夾，文件夾下有且只有一個index.html文件。
并且vue是單頁應(yīng)用，因此我們可以認(rèn)為所有的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)文章
SpringBoot+Vue開發(fā)之Login校驗規(guī)則、實現(xiàn)登錄和重置事件
這篇文章主要介紹了SpringBoot+Vue開發(fā)之Login校驗規(guī)則、實現(xiàn)登錄和重置事件,本文通過圖文實例相結(jié)合給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-10-10
如何在Vue和Spring?boot之間實現(xiàn)前后端連接
最近搭建一個Springboot+vue前后端分離項目,真的很簡單,下面這篇文章主要給大家介紹了關(guān)于如何在Vue和Spring?boot之間實現(xiàn)前后端連接的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05
本篇文章主要介紹了詳解如何使用webpack在vue項目中寫jsx語法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
mitt又稱事務(wù)總線,是第三方插件,這篇文章主要為大家詳細(xì)介紹了Vue3中事件總線mitt的使用方式,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2025-03-03
淺談Vue2.4.0 $attrs與inheritAttrs的具體使用
這篇文章主要介紹了淺談Vue2.4.0 $attrs與inheritAttrs的具體使用,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
本文主要介紹了vue3使用flv.js播放推流視頻的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
本文主要介紹了Vue顯示圖片的幾種方式小結(jié)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
這篇文章主要介紹了vue 自定義右鍵樣式的實例代碼，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-11-11
這篇文章主要給大家介紹了關(guān)于vue獲取當(dāng)前路由的五種方式,文中通過代碼示例介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2023-08-08
vue結(jié)合v-for和input實現(xiàn)多選列表checkbox功能
在Vue中,可通過v-for指令和v-model實現(xiàn)多選列表功能,首先,使用v-for指令遍歷數(shù)組生成列表項,每個列表項包含一個復(fù)選框,復(fù)選框的v-model綁定到一個數(shù)組變量,用于存儲選中的值,感興趣的朋友跟隨小編一起看看吧2024-09-09