nginx如何配置vue項目history的路由模式(非根目錄)
更新時間：2023年10月13日 09:32:28 作者：養(yǎng)只貓
這篇文章主要介紹了nginx如何配置vue項目history的路由模式(非根目錄),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
vue的路由分為兩種hash和history，hash路由雖然不需要做太多的配置但是url地址上會有一個很丑的#號。
而history模式的路由不會有這個#號但是帶來的問題卻是刷新頁面之后會404找不到頁面，原因是spa單頁面是通過js來進行跳轉的。
瀏覽器根據(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
總結
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
<Teleport> 是 Vue 3 的一個內置組件,允許將組件的內容渲染到 DOM 中的任意位置,而不改變其邏輯結構,這篇文章主要介紹了Vue 3 的＜Teleport＞功能與用法詳解,需要的朋友可以參考下2025-04-04
這篇文章主要為大家介紹了Vue2?中的數(shù)據(jù)劫持簡寫示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
這篇文章主要介紹了Vue學習之組件用法,結合實例形式分析了vue.js組件的使用流程、模板、父子組件、插槽slot等相關原理與操作技巧,需要的朋友可以參考下2020-01-01
基于node+vue實現(xiàn)簡單的WebSocket聊天功能
最近學習了一下websocket的即時通信，感覺非常的強大，這里我用node啟動了一個服務進行websocket鏈接，然后再vue的view里面進行了鏈接，進行通信，廢話不多說，直接上代碼吧2020-02-02
這篇文章主要介紹了Vue-axios 設置請求頭問題,文中給大家提到了axios設置請求頭內容的方法，需要的朋友可以參考下2018-12-12
vue是一個單頁面的應用,這導致一些爬蟲和百度無法搜索到,如果你想針對你應用的其中某些頁面進行SEO優(yōu)化,讓他們可以被爬蟲和百度搜索到,你可以進行預渲染操作,下面這篇文章主要給大家介紹了關于Vue單頁面應用做預渲染的相關資料,需要的朋友可以參考下2021-10-10
vue中nextTick函數(shù)和react類似實現(xiàn)代碼
Vue 3 中的 nextTick 主要通過 Promise 實現(xiàn)異步調度,返回一個 Promise 對象,這篇文章主要介紹了vue中nextTick函數(shù)和react類似實現(xiàn)代碼,需要的朋友可以參考下2024-04-04
Vue創(chuàng)建項目后沒有webpack.config.js(vue.config.js)文件的解決
這篇文章主要介紹了Vue創(chuàng)建項目后沒有webpack.config.js(vue.config.js)文件的解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要介紹了Vue使用swiper問題(5.2.0版本,避免踩坑)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
本文給大家介紹了vue路由攔截的三種方法,全局前置守衛(wèi),路由獨享守衛(wèi)和全局后置鉤子這三種方法,并通過代碼示例給大家介紹的非常詳細,對大家的學習或工作有一定的幫助,需要的朋友可以參考下2024-02-02