一、前端源码下载

下载地址：购买授权后寻找站长获取！

二、操作步骤

步骤1：安装Node.js环境

  1. 登录宝塔面板，安装「Node.js版本管理器」插件；
  2. 安装Node.js ≥22.x版本（无对应版本则点击「更新版本列表」）。

步骤2：创建客户端文件夹

前往PHP项目所在目录，新建「客户端文件夹」（建议直接放在PHP项目内，便于管理）。

步骤3：上传并解压源码

  1. 将下载的前端源码压缩包上传至新建的客户端文件夹；
  2. 解压压缩包，确保源码文件完整释放。

步骤4：配置后端域名与端口

  1. 打开源码目录下的 server/runtime.config.json 文件；
  2. 修改「后端域名」为实际的系统后端域名；
  3. 端口可自定义（默认5219），确保端口未被占用。

步骤5：部署Node.js项目

  1. 宝塔面板 → 网站 → Node.js项目 → 新增项目；
  2. 命令行版本选择22.x及以上；
  3. 项目目录：选择前端源码解压后的「server」文件夹；
  4. 启动选项：自定义启动命令，指定启动文件为 index.mjs；
  5. 端口号：填写5219（或步骤4中修改的自定义端口）；
  6. 输入系统域名，点击「确定」；
  7. 若启动失败，将运行用户改为root后重试。

步骤6：配置PHP项目伪静态

  1. 进入宝塔对应PHP项目的「伪静态」设置页；
  2. 粘贴以下配置（注意：替换路径为实际前端源码路径）：
location ~* ^/(public|apis|av1|av2|dapi)/ {
  try_files $uri $uri/ /index.php?$query_string;
}
location ~ ^/_nuxt/(.*)$ {
    alias /www/wwwroot/xxx/newweb/public/_nuxt/$1;  # 替换为实际路径
}

location / {
        proxy_pass http://127.0.0.1:5219;  # 端口与步骤4、5保持一致
        proxy_set_header Host $host:$server_port;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header REMOTE-HOST $remote_addr;
        add_header X-Cache $upstream_cache_status;
        proxy_set_header X-Host $host:$server_port;
        proxy_set_header X-Scheme $scheme;
        proxy_connect_timeout 30s;
        proxy_read_timeout 86400s;
        proxy_send_timeout 30s;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }
    3. 保存配置并重启PHP项目，完成前端UI更新部署。

三、注意事项

  • Node.js版本必须≥22.x，否则可能导致项目启动失败；
  • 端口需全程统一，避免出现对接异常；
  • 伪静态配置中的路径需准确替换，否则会出现资源加载失败问题；
  • 若部署后无法访问，可检查端口是否开放、域名解析是否正确。