龙霄前端是使用Node.js平台的Nuxt.js框架进行开发，我们以龙霄演示站域名 `lx.yfdxs.com` 为例来设置。

## 一、上传前端文件

在配置之前，我们先进入\[**宝塔-文件**\]，在 `/www/wwwroot` 目录下新建一个文件夹 `lx.yfdxs.com`，进入目录后，将下载的**主题前端**压缩包上传并解压，得到如下图：

![](https://pic.salongweb.com/2025/10/longxiao-frontend-8.webp)## 二、配置前端

1、进入宝塔面板——网站中，切换到\[**Node项目**\]，现点击\[**Node版本管理器**\]

![](https://pic.salongweb.com/2025/10/longxiao-frontend-1.webp)2、选择最新的一个稳定版本的Node.js，点击右侧的安装

![](https://pic.salongweb.com/2025/10/longxiao-frontend-2.webp)3、Node.js安装好后，\[**命令行版本**\]中选择刚安装好的版本，再点击\[**模块**\]

![](https://pic.salongweb.com/2025/10/longxiao-frontend-3.webp)4、在输入框中输入 `pnpm` ，点击安装后即可关闭这些弹窗

![](https://pic.salongweb.com/2025/10/longxiao-frontend-4.webp)5、点击\[**添加项目**\]按钮(第二张图所示的按钮)，按下图所示进行设置修改

![](https://pic.salongweb.com/2025/10/longxiao-frontend-5.webp)**注：默认是使用 `3000` 端口，一定要在 \[宝塔——安全\]中放行 `3000` 端口，点击\[**添加端口规则**\]，在弹出的面板\[**端口**\]中输入 `3000`，确定即可**

6、项目添加后，到项目列表中点击\[**项目名称**\]或\[**设置**\]，在\[**域名管理**\]中添加前端域名

![](https://pic.salongweb.com/2025/10/longxiao-frontend-6.webp)7、开启\[**外网映射**\]，SSL设置就不用多说了，最后再重启下项目

![](https://pic.salongweb.com/2025/10/longxiao-frontend-7.webp)## 三、多个Node项目，修改端口

如果宝塔上有多个Node项目，则默认的3000端口会被占用，项目启动不了，这时就需要手动修改下。

1、打开 `/server/chunks/nitro/node-server.mjs` 文件，搜索 `3e3` (偶尔会有多个，是：fs=destr(t.env.NITRO\_PORT||t.env.PORT)||3e3 中的)，修改成其它端口，如：3100

2、设置项目端口为 3100

![](https://pic.salongweb.com/2025/10/longxiao-frontend-9.webp)**注：自定义的项目端口，一定要勾选\[放行端口\]**

## 三、配置静态文件访问

再进入宝塔——网站——Node项目中，点击项目名称或设置，进入Node项目管理中，再点击配置文件，将下面代码添加到server中

```
# 配置静态文章上传可访问，验证完成需要删除
location ~* ^/(.*\.(txt|xml|json|md|html))$ {
    alias /www/wwwroot/lx.yfdxs.com/public/$1;
}
```

```
# 验证文件精确匹配（百度，谷歌，Bing站长平台的验证文件），可一直保留
location ~* ^/(baidu_verify|google|BingSiteAuth) {
    root /www/wwwroot/lx.yfdxs.com/public;
    try_files $uri =404;
}
```

重启前端项目后即可访问 /public 目录下的文件

**注：记得修改 /www/wwwroot/lx.yfdxs.com/public/ 为你的前端 public 目录**