如何在寶塔面板部署vue項目
1、打包自己的vue項目文件
2、寶塔面板登錄 并進(jìn)入左側(cè)網(wǎng)站對應(yīng)的頁面
3、添加站點(diǎn)
如果沒有域名的可以添加 自己的服務(wù)器地址 如果服務(wù)器地址已經(jīng) 添加過了 想在服務(wù)器其他端口 展示項目則可以 隨便填寫過域名 （ 有域名的可以跳到第6步哦 ）
4、進(jìn)入當(dāng)前添加好了的站點(diǎn) 點(diǎn)擊 右側(cè)的設(shè)置 進(jìn)入設(shè)置頁面
5、添加自己服務(wù)器的 地址加端口
（端口：自己想要訪問前端頁面以什么 端口訪問）點(diǎn)擊添加 然后 點(diǎn)擊刪除之前隨便 添加的域名 這里的48.125.35.65是隨便打的
6、進(jìn)入當(dāng)前創(chuàng)建好了的站點(diǎn) 對應(yīng)的文件路徑
（或者直接點(diǎn)擊 根目錄就可以進(jìn)入）
7、進(jìn)入當(dāng)前的目錄后可以選擇是否刪除它的原始文件
（最好還是不要刪除 .htaccess文件 與 .user.ini文件 這邊也不太清楚會不會出現(xiàn)問題） 然后把打包的dist放入進(jìn)來（這邊就不操作放入了）
配置反向代理
如果需要操作反向代理的話 進(jìn)入網(wǎng)站對應(yīng)頁面 設(shè)置 找到對應(yīng)的反向代理 添加反向代理
打開高級功能才會出現(xiàn) 代理目錄 代理目錄要寫前端配置的代理的同樣的（我這邊的前端配置的代理名稱為/consumapi 需要在后面添加個/ 才會有效果）代理名稱隨便寫 目標(biāo)URL 與 發(fā)送域名 寫自己需要代理地址 內(nèi)容替換這里看自己的項目（我這邊是沒有這個） 然后點(diǎn)擊提交就可以
部署多個項目
vue-router文件 history 模式 base為/consumption/ base表示在所有路由前都會加上/consumption/
vue.config.js文件 publicPath pusblicePath 指定子路徑
在站點(diǎn)的 設(shè)置 配件文件里添加該語句 如果路徑為/consumption/ 則會到當(dāng)前站點(diǎn)的根目錄下的consumtion文件夾里尋找資源（不知道是不是這樣解釋的）
添加的配置
location ^~ /consumption/ {
try_files $uri $uri/ /consumption/index.html;
} 完整文件
總結(jié)
到此這篇關(guān)于如何在寶塔面板部署vue項目的文章就介紹到這了,更多相關(guān)寶塔部署vue項目內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue中使用XMLHttpRequest（XHR）可以獲取數(shù)據(jù)的方式與傳統(tǒng)的HTML頁面相同，本文主要來和大家講講它的正確使用方法，希望對大家有所幫助2023-05-05
這篇文章主要為大家詳細(xì)介紹了vue組件生命周期，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
Vue項目中使用WebUploader實(shí)現(xiàn)文件上傳的方法
WebUploader是由 Baidu WebFE(FEX) 團(tuán)隊開發(fā)的一個簡單的以 HTML5為主 ， FLASH為輔 的現(xiàn)代 文件上傳組件 。這篇文章主要介紹了在Vue項目中使用WebUploader實(shí)現(xiàn)文件上傳,需要的朋友可以參考下2019-07-07
vue css 引入asstes中的圖片無法顯示的四種解決方法
這篇文章主要介紹了vue css 引入asstes中的圖片 無法顯示的幾種解決方案,本文給出了四種解決方法，每種方法給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-03-03
這篇文章主要給大家介紹了關(guān)于vue項目中使用天地圖的相關(guān)資料,在Vue.js項目中使用天地圖,首先需要申請apikey并在index.html中引入天地圖的js文件,然后創(chuàng)建一個div元素作為地圖容器,并通過CSS設(shè)置其樣式,需要的朋友可以參考下2024-11-11
vue2.0 中使用transition實(shí)現(xiàn)動畫效果使用心得
這篇文章主要介紹了vue2.0 中使用transition實(shí)現(xiàn)動畫效果使用心得，本文通過案例知識給大家介紹的非常詳細(xì)，需要的朋友參考下吧2018-08-08
這篇文章主要為大家詳細(xì)介紹了vue基于better-scroll仿京東分類列表，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06
在Vue3中使用Vue Tour實(shí)現(xiàn)頁面導(dǎo)覽
Vue Tour 是一個方便的 Vue.js 插件,它可以幫助我們在網(wǎng)站或應(yīng)用中實(shí)現(xiàn)簡單而靈活的頁面導(dǎo)覽功能,本文我們將介紹如何在 Vue 3 中使用 Vue Tour,并通過示例代碼演示其基本用法,需要的朋友可以參考下2024-04-04
Element Table 自適應(yīng)高度的實(shí)現(xiàn)示例
el-table的高度不能適應(yīng)不同電腦的分辨率,也不能跟隨瀏覽器的高度變化而變化的問題,本文就來解決一下Element Table 自適應(yīng)高度,感興趣的可以了解一下2024-07-07
詳解vue-cli開發(fā)環(huán)境跨域問題解決方案
本篇文章主要介紹了vue-cli開發(fā)環(huán)境跨域問題解決方案，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-06-06