nginx如何配置vue項(xiàng)目history的路由模式(非根目錄)
vue的路由分為兩種hash和history，hash路由雖然不需要做太多的配置但是url地址上會(huì)有一個(gè)很丑的#號(hào)。
而history模式的路由不會(huì)有這個(gè)#號(hào)但是帶來(lái)的問(wèn)題卻是刷新頁(yè)面之后會(huì)404找不到頁(yè)面，原因是spa單頁(yè)面是通過(guò)js來(lái)進(jìn)行跳轉(zhuǎn)的。
瀏覽器根據(jù)路由地址是找不到服務(wù)器上相關(guān)的文件的，所以這里需要進(jìn)行相應(yīng)的服務(wù)器配置。
這里我選用的是nginx服務(wù)器
vue項(xiàng)目中
vue.config.js
router.js
然后npm run build打包。
nginx相關(guān)的配置
server {
listen 81;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location ^~/test {
#root /test/; #項(xiàng)目路徑
index index.html;
try_files $uri $uri/ /test/index.html; #匹配不到任何靜態(tài)資源，跳到同一個(gè)index.html
error_page 404 /test/index.html;//404頁(yè)面跳到同一個(gè)index.html
}nginx目錄
項(xiàng)目是放在nginx服務(wù)器根目錄下的test文件夾下的
啟動(dòng)nginx瀏覽器訪問(wèn)localhost:81/test/
選擇到其中一個(gè)二級(jí)頁(yè)面進(jìn)入頁(yè)面后刷新沒(méi)有報(bào)404！??！大功告成?。?！
補(bǔ)充：
nginx的相關(guān)操作
開(kāi)啟：在nginx安裝的根目錄運(yùn)行cmd執(zhí)行nginx命令
停止：nginx -t
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
- Vue項(xiàng)目Nginx子目錄部署(Vite和Vue-CLI)
- nginx找到默認(rèn)根目錄(root?html)的方法
- 通過(guò)nginx實(shí)現(xiàn)訪問(wèn)服務(wù)器指定目錄下圖片資源
- nginx 不同的訪問(wèn)路徑對(duì)應(yīng)項(xiàng)目不同的目錄的實(shí)現(xiàn)方法
- nginx設(shè)置資源請(qǐng)求目錄的方式詳解
- Nginx安裝完成沒(méi)有生成sbin目錄的解決方法
- Nginx本地目錄映射實(shí)現(xiàn)代碼實(shí)例
- nginx用正則表達(dá)式實(shí)現(xiàn)泛域名自動(dòng)匹配目錄的方法
- 深入理解Nginx中的sites-enabled目錄
相關(guān)文章
這篇文章主要介紹了vue3的基本使用方法,結(jié)合實(shí)例形式詳細(xì)分析了vue3功能、組件、生命周期、TypeScript結(jié)合運(yùn)用等相關(guān)概念與使用方法,需要的朋友可以參考下2023-06-06
基于vue-seamless-scroll實(shí)現(xiàn)無(wú)縫滾動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了基于vue-seamless-scroll實(shí)現(xiàn)無(wú)縫滾動(dòng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
undefined是否會(huì)變?yōu)閚ull原理解析
這篇文章主要為大家介紹了undefined是否會(huì)變?yōu)閚ull原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
本文主要介紹了vue使用axios接收流文件的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
這篇文章主要為大家介紹了vue的可拖拽的瀑布流布局組件有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
這篇文章主要介紹了vue.js如何刪除數(shù)組中指定索引的元素問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
vue基于mint-ui實(shí)現(xiàn)城市選擇三級(jí)聯(lián)動(dòng)
這篇文章主要為大家詳細(xì)介紹了vue基于mint-ui實(shí)現(xiàn)城市選擇三級(jí)聯(lián)動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-04-04
Vue 列表頁(yè)帶參數(shù)進(jìn)詳情頁(yè)的操作(router-link)
這篇文章主要介紹了Vue 列表頁(yè)帶參數(shù)進(jìn)詳情頁(yè)的操作(router-link)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
Vuex2.0+Vue2.0構(gòu)建備忘錄應(yīng)用實(shí)踐
這篇文章主要為大家詳細(xì)介紹了Vuex2.0+Vue2.0構(gòu)建備忘錄應(yīng)用實(shí)踐,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-11
我們?cè)陧?xiàng)目開(kāi)發(fā)的過(guò)程中，經(jīng)常會(huì)遇到這種情況：為data中的某一個(gè)對(duì)象添加一個(gè)屬性，我們?cè)撊绾谓鉀Q這個(gè)問(wèn)題呢，下面小編給大家?guī)?lái)了Vue中this.$set的正確使用，感興趣的朋友跟隨小編一起看看吧2022-12-12