VUE前端項(xiàng)目打包部署云服務(wù)器詳細(xì)流程(寶塔)

更新時(shí)間：2025年07月11日 10:09:13 作者：xL-gz

Vue.js是一個(gè)流行的前端JavaScript框架,用于構(gòu)建現(xiàn)代web應(yīng)用程序,這篇文章主要介紹了VUE前端項(xiàng)目打包部署云服務(wù)器的相關(guān)資料,文中通過圖文以及代碼介紹的非常詳細(xì),需要的朋友可以參考下

項(xiàng)目背景與部署流程

前端框架采用Vue3 + TypeScript，打包輸出目錄為dist，部署目標(biāo)為騰訊云輕量服務(wù)器（OpenCloudOS），使用寶塔面板管理網(wǎng)站，Nginx托管靜態(tài)文件，安全組開放必要端口。

確保項(xiàng)目已正確打包，在本地項(xiàng)目根目錄運(yùn)行以下命令生成dist文件夾：

npm run build

生成在項(xiàng)目根目錄

方法一：使用SCP命令上傳

scp -r dist root@159.75.243.81:/usr/share/nginx/html/my-site

ssh root@159.75.243.81
mkdir -p /usr/share/nginx/html/my-site
exit

本人對(duì)服務(wù)器不太了解熟悉，所以安裝寶塔

服務(wù)器終端執(zhí)行以下命令安裝寶塔面板：

yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh

安裝完成后會(huì)輸出登錄地址、用戶名和密碼，例如：

外網(wǎng)面板地址: https://159.75.243.81:29515/xxxxxx
username: admin
password: xxxxxx

登錄騰訊云控制臺(tái)，進(jìn)入【輕量服務(wù)器】→【防火墻】，添加以下入站規(guī)則：

協(xié)議類型	端口范圍	源地址	描述
TCP	80	0.0.0.0/0	HTTP網(wǎng)站訪問
TCP	29515	0.0.0.0/0	寶塔面板訪問
TCP	22	0.0.0.0/0	SSH登錄

80 和 22 是默認(rèn)就有的添加29515即可，應(yīng)用我選擇的自定義

登錄寶塔面板 瀏覽器訪問：

https://159.75.243.81:29515/xxxxxx

以上的地址密碼：參考你自己運(yùn)行安裝寶塔輸出的顯示結(jié)果

輸入用戶名和密碼登錄

根據(jù)提示注冊(cè)或者綁定已有的寶塔賬號(hào)

首次登陸

首頁會(huì)提示你安裝運(yùn)行環(huán)境，選擇安裝：

點(diǎn)擊【一鍵安裝】，等待安裝完成

添加站點(diǎn)

上傳并解壓dist文件

瀏覽器打開以下地址即可訪問部署好的Vue頁面：

http://159.75.243.81

為了區(qū)分不同的項(xiàng)目使用端口號(hào)區(qū)分【上面的操作默認(rèn)使用的80端口】

在根目錄下可創(chuàng)建多個(gè)文件夾作為不同項(xiàng)目的區(qū)分

在網(wǎng)站-添加站點(diǎn)的時(shí)候輸入你的公網(wǎng)IP 在加上一個(gè)不同的端口號(hào)

添加好后，把你打包的文件夾解壓，里面的文件放入上面創(chuàng)建的文件夾里面去

這樣在我的project2文件夾里面放入vue打包后的產(chǎn)物

最后一步：在云服務(wù)器把你剛才添加的端口號(hào)的

操作	說明
關(guān)閉寶塔默認(rèn) HTTPS	在【設(shè)置】→【面板設(shè)置】中關(guān)閉 SSL 訪問，除非你已綁定域名并申請(qǐng)證書
修改寶塔登錄端口	如需更安全，可在面板設(shè)置中修改為其他非知名端口（如 8888、8080）
綁定域名并啟用 HTTPS	后續(xù)可以用 Let's Encrypt 免費(fèi)申請(qǐng) SSL 證書