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)樗淮嬖?，所以我們此時(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)文章
SpringBoot+Vue開發(fā)之Login校驗(yàn)規(guī)則、實(shí)現(xiàn)登錄和重置事件
這篇文章主要介紹了SpringBoot+Vue開發(fā)之Login校驗(yàn)規(guī)則、實(shí)現(xiàn)登錄和重置事件,本文通過圖文實(shí)例相結(jié)合給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-10-10
如何在Vue和Spring?boot之間實(shí)現(xiàn)前后端連接
最近搭建一個(gè)Springboot+vue前后端分離項(xiàng)目,真的很簡(jiǎn)單,下面這篇文章主要給大家介紹了關(guān)于如何在Vue和Spring?boot之間實(shí)現(xiàn)前后端連接的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05
詳解如何使用webpack在vue項(xiàng)目中寫jsx語法
本篇文章主要介紹了詳解如何使用webpack在vue項(xiàng)目中寫jsx語法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11
mitt又稱事務(wù)總線,是第三方插件,這篇文章主要為大家詳細(xì)介紹了Vue3中事件總線mitt的使用方式,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2025-03-03
淺談Vue2.4.0 $attrs與inheritAttrs的具體使用
這篇文章主要介紹了淺談Vue2.4.0 $attrs與inheritAttrs的具體使用,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
本文主要介紹了vue3使用flv.js播放推流視頻的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
本文主要介紹了Vue顯示圖片的幾種方式小結(jié)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
這篇文章主要介紹了vue 自定義右鍵樣式的實(shí)例代碼，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-11-11
這篇文章主要給大家介紹了關(guān)于vue獲取當(dāng)前路由的五種方式,文中通過代碼示例介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-08-08
vue結(jié)合v-for和input實(shí)現(xiàn)多選列表checkbox功能
在Vue中,可通過v-for指令和v-model實(shí)現(xiàn)多選列表功能,首先,使用v-for指令遍歷數(shù)組生成列表項(xiàng),每個(gè)列表項(xiàng)包含一個(gè)復(fù)選框,復(fù)選框的v-model綁定到一個(gè)數(shù)組變量,用于存儲(chǔ)選中的值,感興趣的朋友跟隨小編一起看看吧2024-09-09