五步教你用Nginx部署Vue項(xiàng)目及解決動(dòng)態(tài)路由刷新404問(wèn)題
期末月前本來(lái)部署過(guò)一次，昨天部署的時(shí)候發(fā)現(xiàn)又給忘了，而且出了很多問(wèn)題，在這統(tǒng)一匯總一下。
步驟一：改端口
在vue.config.js下的devServer把host改成服務(wù)器的地址
步驟二： 打包
用npm run build打包，最后是這樣的，并且目錄下多了個(gè)dist文件夾
步驟三：將dist文件夾上傳到服務(wù)器上
我用的xshell，沒(méi)辦法上傳文件夾，所以我是壓縮成rar用rz上傳再在服務(wù)器上解壓的，至于linux怎么解壓rar，看這如何在Linux系統(tǒng)中解壓rar文件
肯定有更好的方法，但是我還沒(méi)找到。解壓后長(zhǎng)這樣
步驟四:修改nginx.conf(重中之重)
這一步很關(guān)鍵，設(shè)置不好可能出現(xiàn)頁(yè)面403或404報(bào)錯(cuò)。
首先，用nginx -t找到nginx.conf的具體路徑
接下來(lái)開(kāi)始編輯這個(gè)文件，下圖這個(gè)地方要改成當(dāng)前操作用戶的用戶名，不然可能部署之后打開(kāi)頁(yè)面報(bào)錯(cuò)403。
接下來(lái)，將1部分改成解壓后的dist存放位置
2和3是解決路由刷新報(bào)錯(cuò)404的問(wèn)題
try_files $uri $uri/ @router;
location @router {
rewrite ^.*$ /index.html last;
}
步驟五：重啟nginx
systemctl restart nginx
然后就能正常打開(kāi)頁(yè)面啦
總結(jié)
到此這篇關(guān)于五步教你用Nginx部署Vue項(xiàng)目及解決動(dòng)態(tài)路由刷新404問(wèn)題的文章就介紹到這了,更多相關(guān)Nginx部署Vue及動(dòng)態(tài)路由刷新404內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
詳解Vue-cli來(lái)構(gòu)建Vue項(xiàng)目的步驟
這篇文章主要為大家介紹了Vue-cli來(lái)構(gòu)建Vue項(xiàng)目的步驟，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2021-12-12
本篇文章將會(huì)嘗試從算法的角度主要聊一聊vue2的diff策略,幫助讀者朋友在遇到相關(guān)的面試題時(shí)可以和面試官談笑風(fēng)生,文中有相關(guān)的圖解和代碼示例,感興趣的同學(xué)跟著小編一起來(lái)看看吧2023-08-08
這篇文章主要介紹了vue 解決IOS10低版本白屏的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
這篇文章主要介紹了Vue3屬性綁定方法解析，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-09-09
這篇文章主要介紹了react和vue的事件處理差異,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
vue arco.design錨點(diǎn)Anchor使用方式
這篇文章主要介紹了vue arco.design錨點(diǎn)Anchor使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04
這篇文章主要介紹了vue中input的v-model清空操作，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-09-09
使用Vue寫(xiě)一個(gè)todoList事件備忘錄經(jīng)典小案例
學(xué)習(xí)了幾天Vue之后終于迎來(lái)了第一個(gè)小案例,todoList是非常常見(jiàn)地一個(gè)小案例,下面這篇文章主要給大家介紹了關(guān)于使用Vue寫(xiě)一個(gè)todoList事件備忘錄經(jīng)典小案例的相關(guān)資料,需要的朋友可以參考下2022-10-10
這篇文章主要介紹了vue實(shí)現(xiàn)打印功能的兩種方法,文中通過(guò)兩種方法給大家介紹了指定不打印區(qū)域的解決方法，需要的朋友可以參考下2018-09-09
vue3中使用Apache?ECharts的詳細(xì)方法
最近在做一些數(shù)據(jù)透析的項(xiàng)目需要用到報(bào)表圖，那么報(bào)表圖好用的有老牌的ECharts，比較新意的AntV，思前馬后的想了一下還是用了Echarts，這篇文章主要介紹了vue3中使用Apache?ECharts,需要的朋友可以參考下2022-11-11