1、打包自己的vue項(xiàng)目文件

2、寶塔面板登錄 并進(jìn)入左側(cè)網(wǎng)站對(duì)應(yīng)的頁(yè)面

3、添加站點(diǎn)

如果沒(méi)有域名的可以添加 自己的服務(wù)器地址 如果服務(wù)器地址已經(jīng) 添加過(guò)了 想在服務(wù)器其他端口 展示項(xiàng)目則可以 隨便填寫(xiě)過(guò)域名 （ 有域名的可以跳到第6步哦 ）

4、進(jìn)入當(dāng)前添加好了的站點(diǎn) 點(diǎn)擊 右側(cè)的設(shè)置 進(jìn)入設(shè)置頁(yè)面

5、添加自己服務(wù)器的 地址加端口

（端口：自己想要訪(fǎng)問(wèn)前端頁(yè)面以什么 端口訪(fǎng)問(wèn)）點(diǎn)擊添加 然后 點(diǎn)擊刪除之前隨便 添加的域名 這里的48.125.35.65是隨便打的

6、進(jìn)入當(dāng)前創(chuàng)建好了的站點(diǎn) 對(duì)應(yīng)的文件路徑

（或者直接點(diǎn)擊 根目錄就可以進(jìn)入）

7、進(jìn)入當(dāng)前的目錄后可以選擇是否刪除它的原始文件

（最好還是不要?jiǎng)h除 .htaccess文件 與 .user.ini文件 這邊也不太清楚會(huì)不會(huì)出現(xiàn)問(wèn)題） 然后把打包的dist放入進(jìn)來(lái)（這邊就不操作放入了）

配置反向代理

如果需要操作反向代理的話(huà) 進(jìn)入網(wǎng)站對(duì)應(yīng)頁(yè)面 設(shè)置 找到對(duì)應(yīng)的反向代理 添加反向代理

打開(kāi)高級(jí)功能才會(huì)出現(xiàn) 代理目錄 代理目錄要寫(xiě)前端配置的代理的同樣的（我這邊的前端配置的代理名稱(chēng)為/consumapi 需要在后面添加個(gè)/ 才會(huì)有效果）代理名稱(chēng)隨便寫(xiě) 目標(biāo)URL 與 發(fā)送域名 寫(xiě)自己需要代理地址 內(nèi)容替換這里看自己的項(xiàng)目（我這邊是沒(méi)有這個(gè)） 然后點(diǎn)擊提交就可以

部署多個(gè)項(xiàng)目

vue-router文件 history 模式 base為/consumption/ base表示在所有路由前都會(huì)加上/consumption/

vue.config.js文件 publicPath pusblicePath 指定子路徑

在站點(diǎn)的 設(shè)置 配件文件里添加該語(yǔ)句 如果路徑為/consumption/ 則會(huì)到當(dāng)前站點(diǎn)的根目錄下的consumtion文件夾里尋找資源（不知道是不是這樣解釋的）

添加的配置

 location  ^~ /consumption/ {
    try_files $uri $uri/ /consumption/index.html;
 } 

完整文件

總結(jié)

到此這篇關(guān)于如何在寶塔面板部署vue項(xiàng)目的文章就介紹到這了,更多相關(guān)寶塔部署vue項(xiàng)目?jī)?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論