項目背景與部署流程

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

本地開發(fā)環(huán)境準備

確保項目已正確打包，在本地項目根目錄運行以下命令生成dist文件夾：

npm run build

生成在項目根目錄

上傳dist到服務器

方法一：使用SCP命令上傳

1. 本地命令行切換到dist所在目錄（項目根目錄）

1. 執(zhí)行上傳命令：

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

1. 若路徑不存在，先登錄服務器創(chuàng)建目錄：

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

本人對服務器不太了解熟悉，所以安裝寶塔

寶塔面板安裝

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

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

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

外網面板地址: https://159.75.243.81:29515/xxxxxx
username: admin
password: xxxxxx

安全組規(guī)則配置

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

80 和 22 是默認就有的 添加29515即可，應用我選擇的自定義

寶塔面板部署網站

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

https://159.75.243.81:29515/xxxxxx

以上的地址密碼：參考你自己運行安裝寶塔輸出的顯示結果

輸入用戶名和密碼登錄

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

首次登陸

1. 修改管理員密碼（重要）

• 左上角頭像 → 修改密碼 → 設置一個更安全的密碼

2. 安裝推薦環(huán)境（LNMP）

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

• Nginx（Web服務器）
• MySQL（數(shù)據(jù)庫）
• PHP（Vue項目可選，主要用于后端接口）
• phpMyAdmin（數(shù)據(jù)庫管理工具）

點擊【一鍵安裝】，等待安裝完成

添加站點

1. 點擊左側菜單【網站】→【添加站點】
2. 域名填寫159.75.243.81或自定義域名------你自己云服務器的公網ip
3. 根目錄自動創(chuàng)建為/www/wwwroot/159.75.243.81

上傳并解壓dist文件

1. 點擊【文件】→【上傳】
2. 將dist.zip上傳至網站根目錄
3. 右鍵解壓文件

訪問網站

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

http://159.75.243.81

多個項目創(chuàng)建

為了區(qū)分不同的項目使用端口號區(qū)分【上面的操作默認使用的80端口】

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

在網站-添加站點的時候輸入你的公網IP 在加上一個不同的端口號

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

這樣在我的project2文件夾里面放入vue打包后的產物

最后一步：在云服務器把你剛才添加的端口號的

?? 補充建議：提高安全性

總結 

到此這篇關于VUE前端項目打包部署云服務器的文章就介紹到這了,更多相關VUE前端打包部署云服務器內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論