一、項目打包（以 Vue 項目為例）

1. 在 WebStorm 中完成項目開發與測試
   ..本地項目能正常運行（如執行 npm run serve 測試），修復所有報錯。
2. 生成生產環境打包文件

• 在 WebStorm 底部的「Terminal」終端中，執行打包命令：

  bash

  npm run build  # Vue項目默認打包命令，React項目通常為 npm run build

  
  

• 打包完成后，項目根目錄會生成 dist 文件夾（或 build 文件夾），內含可直接部署的靜態文件（HTML、CSS、JS 等）。

二、準備貴州云服務器環境

1. 登錄云服務器控制臺
   登錄你所選擇的貴州云服務商（如阿里云、華為云、騰訊云等）的控制臺，進入已購買的云服務器實例頁面。
2. 配置服務器基礎環境

• ..服務器已安裝 Web 服務器（如 Nginx、Apache），以 Nginx 為例：
  ① 通過 SSH 連接服務器（可使用 WebStorm 的「Remote Host」工具或 PuTTY、Xshell 等）：

  bash

  ssh 用戶名@服務器公網IP  # 例如：ssh root@123.45.67.89

  
  ② 安裝 Nginx（以 CentOS 為例）：

  bash

  yum install nginx  # 安裝systemctl start nginx  # 啟動systemctl enable nginx  # 設置開機自啟

  
  

• 開放服務器端口（在云服務商控制臺的「安全組」中，開放 80 端口（HTTP）、443 端口（HTTPS，可選））。

三、將打包文件上傳到云服務器

方法 1：使用 WebStorm 的「Deployment」工具（推薦）

1. 配置服務器連接

• Name：自定義名稱（如 “貴州云服務器”）

• SFTP host：服務器公網 IP

• Port：22（默認 SFTP 端口）

• Root path：服務器上存放項目的根目錄（如 /usr/share/nginx/html，Nginx 默認網站目錄）

• Username/Password：服務器登錄賬號密碼（或使用 SSH 密鑰）

• 打開 WebStorm，進入「File > Settings > Build, Execution, Deployment > Deployment」。

• 點擊「+」添加服務器配置，選擇「SFTP」協議，填寫：

• 點擊「Test Connection」測試連接，成功后保存。

2. 上傳打包文件

• 在 WebStorm 左側項目結構中，找到本地的 dist 文件夾（右鍵）。

• 選擇「Deployment > Upload to 貴州云服務器」，等待上傳完成。

方法 2：使用 FTP 工具（如 FileZilla）

1. 下載并安裝 FileZilla，輸入服務器 IP、用戶名、密碼、端口（22），連接服務器。

2. 本地導航到項目的 dist 文件夾，遠程導航到服務器的網站目錄（如 /usr/share/nginx/html），拖拽文件完成上傳。

四、配置服務器訪問（Nginx 為例）

1. 修改 Nginx 配置文件
   連接服務器后，編輯 Nginx 配置：
   bash

   vim /etc/nginx/conf.d/default.conf  # 打開默認配置文件

   
   

   ..配置正確指向項目目錄（root 字段為上傳的 dist 文件夾路徑）：
   nginx

   server {
       listen 80;
       server_name 你的域名或服務器IP;  # 例如：123.45.67.89
   
       root /usr/share/nginx/html;  # 打包文件存放路徑
       index index.html;
   
       # 解決單頁應用路由問題（如Vue Router的history模式）
       location / {
           try_files $uri $uri/ /index.html;
       }}

   
   

2. 重啟 Nginx 生效
   bash

   nginx -t  # 檢查配置是否有誤systemctl restart nginx  # 重啟服務

   
   

五、驗證發布結果

注意事項

1. 域名備案：若使用域名訪問，需在貴州云服務商處完成備案（根據《互聯網信息服務管理辦法》要求）。

2. 權限問題：上傳文件后若出現 403 錯誤，需修改服務器文件權限：

   bash

   chmod -R 755 /usr/share/nginx/html  # 遞歸設置目錄權限

   
   

3. HTTPS 配置：如需加密訪問，可在云服務商控制臺申請.. SSL 證書（如阿里云 SSL），并在 Nginx 中配置 HTTPS。

通過以上步驟，即可將 WebStorm 中的項目打包并部署到貴州云服務器。

（聲明：本文來源于網絡，僅供參考閱讀，涉及侵權請聯系我們刪除、不代表任何立場以及觀點。）