行业新闻

一、项目打包（以 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 中的项目打包并部署到贵州云服务器。

（声明：本文来源于网络，仅供参考阅读，涉及侵权请联系我们删除、不代表任何立场以及观点。）