使用寶塔面板中Nginx部署前端Vue項(xiàng)目完整步驟
我相信已經(jīng)到這一步了，Nginx和寶塔過多的描述我就不說了，直接上干貨實(shí)操。
第一步：前端項(xiàng)目打包
直接運(yùn)行Npm run build命令進(jìn)行打包，會(huì)打成一個(gè)dist的壓縮包
注意：我們前端打包的時(shí)候要修改我們連接后端接口的：ip+端口號
然后我們解壓成文件夾！
????
第二步：在寶塔面板中直接下載安裝我們的Nginx
第三步：上傳前端文件
將我們解壓好的前端項(xiàng)目文件上傳到目錄/www/server/nginx/html下
第四步：修改Nginx配置文件
1、
2、
3、
第五步：防火墻放行
這里的端口就是我們剛剛在配置文件中設(shè)置的端口
注意：這里出來我們的寶塔面板放行以后還要在我們對應(yīng)服務(wù)器中的安全組進(jìn)行放行對應(yīng)的端口
第六步：測試
當(dāng)我們前面工作都做完了以后我們?nèi)ピL問我們IP+剛剛的端口就可以訪問了
如果有域名大家可以配置一下，這樣就直接域名加端口訪問了。
附：關(guān)于vue項(xiàng)目寶塔部署后出現(xiàn)路由跳轉(zhuǎn)方面的Nginx問題
問題描述
Vue項(xiàng)目在寶塔面板中部署后出現(xiàn)了路由跳轉(zhuǎn)故障，并且跳轉(zhuǎn)界面中出現(xiàn)提示Nginx錯(cuò)誤
解決方案
確定該項(xiàng)目在本地運(yùn)行中確實(shí)沒路由方面問題，寶塔面板部署后才出現(xiàn)相關(guān)問題，這是因?yàn)闆]有進(jìn)行有關(guān)配置
進(jìn)入寶塔面板地址，選擇“網(wǎng)站”，對目標(biāo)站點(diǎn)點(diǎn)擊“設(shè)置”，在“配置文件”中添加以下內(nèi)容：
location / {
try_files $uri $uri/ /index.html;
}總結(jié)
到此這篇關(guān)于使用寶塔面板中Nginx部署前端Vue項(xiàng)目的文章就介紹到這了,更多相關(guān)寶塔面板Nginx部署前端Vue內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本文主要介紹了vue實(shí)現(xiàn)瀏覽器桌面通知的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
vue如何利用store實(shí)現(xiàn)兩個(gè)平行組件間的傳值
這篇文章主要介紹了vue如何利用store實(shí)現(xiàn)兩個(gè)平行組件間的傳值，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue跳轉(zhuǎn)頁面常用的4種方法與區(qū)別小結(jié)
這篇文章主要給大家介紹了關(guān)于vue跳轉(zhuǎn)頁面常用的4種方法與區(qū)別,文中通過實(shí)例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-03-03
Vue中計(jì)算屬性和監(jiān)聽屬性及數(shù)據(jù)的響應(yīng)式更新和依賴收集基本原理講解
computed是vue的配置選項(xiàng),它的值是一個(gè)對象,其中可定義多個(gè)計(jì)算屬性,每個(gè)計(jì)算屬性就是一個(gè)函數(shù),下面這篇文章主要給大家介紹了關(guān)于vue中計(jì)算屬性computed的詳細(xì)講解,需要的朋友可以參考下2023-03-03
利用vuex-persistedstate將vuex本地存儲(chǔ)實(shí)現(xiàn)
這篇文章主要介紹了利用vuex-persistedstate將vuex本地存儲(chǔ)的實(shí)現(xiàn)，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
解決ant-design-vue中menu菜單無法默認(rèn)展開的問題
這篇文章主要介紹了解決ant-design-vue中menu菜單無法默認(rèn)展開的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
Vue3格式化Volar報(bào)錯(cuò)的原因分析與解決
Volar 與vetur相同,volar是一個(gè)針對vue的vscode插件,下面這篇文章主要給大家介紹了關(guān)于Vue3格式化Volar報(bào)錯(cuò)的原因分析與解決方法,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06
vue3實(shí)現(xiàn)CSS無限無縫滾動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了vue3實(shí)現(xiàn)CSS無限無縫滾動(dòng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
這篇文章主要給大家介紹了關(guān)于Vue3導(dǎo)出pdf文件的相關(guān)資料,最近項(xiàng)目有個(gè)需求,將系統(tǒng)統(tǒng)計(jì)的數(shù)據(jù)生成分析報(bào)告,然后可以導(dǎo)出成PDF,這里給大家總結(jié)下,需要的朋友可以參考下2023-08-08
vue省市區(qū)三聯(lián)動(dòng)下拉選擇組件的實(shí)現(xiàn)
本篇文章主要介紹了vue省市區(qū)三聯(lián)動(dòng)下拉選擇組件的相關(guān)知識。具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-04-04