五步教你用Nginx部署Vue項目及解決動態(tài)路由刷新404問題
期末月前本來部署過一次，昨天部署的時候發(fā)現(xiàn)又給忘了，而且出了很多問題，在這統(tǒng)一匯總一下。
步驟一：改端口
在vue.config.js下的devServer把host改成服務(wù)器的地址
步驟二： 打包
用npm run build打包，最后是這樣的，并且目錄下多了個dist文件夾
步驟三：將dist文件夾上傳到服務(wù)器上
我用的xshell，沒辦法上傳文件夾，所以我是壓縮成rar用rz上傳再在服務(wù)器上解壓的，至于linux怎么解壓rar，看這如何在Linux系統(tǒng)中解壓rar文件
肯定有更好的方法，但是我還沒找到。解壓后長這樣
步驟四:修改nginx.conf(重中之重)
這一步很關(guān)鍵，設(shè)置不好可能出現(xiàn)頁面403或404報錯。
首先，用nginx -t找到nginx.conf的具體路徑
接下來開始編輯這個文件，下圖這個地方要改成當(dāng)前操作用戶的用戶名，不然可能部署之后打開頁面報錯403。
接下來，將1部分改成解壓后的dist存放位置
2和3是解決路由刷新報錯404的問題
try_files $uri $uri/ @router;
location @router {
rewrite ^.*$ /index.html last;
}
步驟五：重啟nginx
systemctl restart nginx
然后就能正常打開頁面啦
總結(jié)
到此這篇關(guān)于五步教你用Nginx部署Vue項目及解決動態(tài)路由刷新404問題的文章就介紹到這了,更多相關(guān)Nginx部署Vue及動態(tài)路由刷新404內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue中使用?Aplayer?和?Metingjs?添加音樂插件的方式
這篇文章主要介紹了Vue中使用?Aplayer?和?Metingjs?添加音樂插件,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-08-08
這篇文章主要介紹了vite中如何使用@?配置路徑別名，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
在vue移動端項目中經(jīng)常遇到這樣的需求,對一些上傳的附件可以點擊之后在線預(yù)覽,所以下面這篇文章主要給大家介紹了關(guān)于vue3中各種類型文件進(jìn)行預(yù)覽功能的相關(guān)資料,需要的朋友可以參考下2021-09-09
Vue+Node實現(xiàn)大文件上傳和斷點續(xù)傳
文件上傳在很多項目中都用的到，如果是幾M的很快就傳送完畢，如果是大文件呢？本文將利用Vue+Node實現(xiàn)大文件上傳和斷點續(xù)傳，感興趣的可以了解一下2022-04-04
使用Vue3和Plotly.js打造一個3D圖在線展示的實現(xiàn)步驟
三維網(wǎng)格圖廣泛應(yīng)用于科學(xué)可視化、醫(yī)學(xué)成像、工程設(shè)計等領(lǐng)域,用于展示復(fù)雜的數(shù)據(jù)結(jié)構(gòu)和空間分布,本文給大家介紹了使用Vue3和Plotly.js打造一個3D圖在線展示的實現(xiàn)步驟,文中有詳細(xì)的代碼示例供大家參考,需要的朋友可以參考下2024-07-07
Vue 動態(tài)路由的實現(xiàn)及 Springsecurity 按鈕級別的權(quán)限控制
這篇文章主要介紹了Vue 動態(tài)路由的實現(xiàn)以及 Springsecurity 按鈕級別的權(quán)限控制的相關(guān)知識，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-09-09
這篇文章主要介紹了詳解Vue CLI3配置解析之css.extract,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
在現(xiàn)代 Web 應(yīng)用中,快速分享鏈接是一項常見需求,二維碼作為一種簡潔的分享方式,受到了廣泛歡迎,所以本文將介紹如何使用 Vue 純前端技術(shù)實現(xiàn)動態(tài)生成鏈接二維碼的方法,需要的可以參考下2024-03-03
在Vue3中可以使用ref函數(shù)來創(chuàng)建一個響應(yīng)式的變量,通過將ref函數(shù)應(yīng)用于一個組件實例,我們可以獲取到該組件的實例對象,這篇文章主要給大家介紹了關(guān)于vue3?ref獲取組件實例的詳細(xì)圖文教程,需要的朋友可以參考下2023-10-10
.native主要是給自定義的組件添加原生事件，可以理解為該修飾符的作用就是把一個vue組件轉(zhuǎn)化為一個普通的HTML標(biāo)簽，并且該修飾符對普通HTML標(biāo)簽是沒有任何作用的，這篇文章主要介紹了vue?事件中的?.native你搞清楚了嗎,需要的朋友可以參考下2023-02-02