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