nginx如何配置vue項(xiàng)目history的路由模式(非根目錄)

更新時間：2023年10月13日 09:32:28 作者：養(yǎng)只貓

這篇文章主要介紹了nginx如何配置vue項(xiàng)目history的路由模式(非根目錄),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

這里我選用的是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)資源，跳到同一個index.html
             error_page 404 /test/index.html;//404頁面跳到同一個index.html
    }

nginx目錄

項(xiàng)目是放在nginx服務(wù)器根目錄下的test文件夾下的

啟動nginx瀏覽器訪問localhost:81/test/

選擇到其中一個二級頁面進(jìn)入頁面后刷新沒有報404?。?！大功告成?。?！

補(bǔ)充：

nginx的相關(guān)操作

開啟：在nginx安裝的根目錄運(yùn)行cmd執(zhí)行nginx命令

停止：nginx -t

總結(jié)

以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

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