部署预览端

预览端是 CatPull 项目的页面渲染客户端，基于 uni-app 构建，支持 H5 和小程序多端部署。所有用户统一通过 app_id + app_key 凭证认证，管理员账号可访问任意项目，普通账号仅限访问自身项目。

属性	值
技术栈	uni-app + Vue 3
默认端口	80（Nginx）
源码目录	catpull-v3/catpull-uni
构建产物（H5）	catpull-uni/dist/build/h5/
构建产物（小程序）	catpull-uni/dist/build/mp-weixin/

配置环境变量

编辑 catpull-uni/.env 文件：

# API 服务地址（通过 Nginx 反向代理到后端）
VITE_URL_SERVER=/api

# 应用凭证（必填）
VITE_APP_ID=your_app_id
VITE_APP_KEY=your_app_key

# 可选：固定预览某个项目（也可通过 URL ?app_uid=xxx 传递）
VITE_APP_UID=

凭证说明

• VITE_APP_ID 和 VITE_APP_KEY 为必填项，在管理后台的密钥管理中获取
• 管理员账号（APP_ADMIN_USER 对应的账号）的凭证拥有全局项目访问权限
• 普通账号的凭证只能访问该账号创建的项目，访问其他项目会返回"无权访问该项目"

构建预览端

cd catpull-v3/catpull-uni

# 安装依赖
pnpm install

# 构建 H5 版本
pnpm build:h5

构建产物输出到 catpull-uni/dist/build/h5/ 目录。

小程序构建

如需部署到微信小程序，使用 pnpm build:mp-weixin，产物输出到 catpull-uni/dist/build/mp-weixin/，然后通过微信开发者工具上传。

Nginx 配置

预览端可以独立域名部署，也可以作为子路径部署在设计器同一域名下。

方案 A：独立域名部署（推荐）

server {
    listen 80;
    server_name preview.your-domain.com;

    # 允许请求头包含下划线
    underscores_in_headers on;

    root /var/www/catpull-uni/dist;
    index index.html;

    # API 反向代理
    location /api/ {
        proxy_pass http://127.0.0.1:9090;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    # SPA 路由回退
    location / {
        try_files $uri $uri/ /index.html;
    }
}

方案 B：子路径部署（与设计器同域）

在设计器的 Nginx 配置中添加预览端 location：

server {
    listen 80;
    server_name your-domain.com;

    # 允许请求头包含下划线
    underscores_in_headers on;

    # 设计器静态资源
    root /var/www/catpull-designer/dist;
    index index.html;

    # 预览端（子路径部署）
    location /preview/ {
        alias /var/www/catpull-uni/dist/;
        try_files $uri $uri/ /preview/index.html;
    }

    # API 反向代理（设计器和预览端共用）
    location /api/ {
        proxy_pass http://127.0.0.1:9090;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        client_max_body_size 10m;
    }

    # ... 其他 location 配置
}

注意

子路径部署时，需要将 catpull-uni/vite.config.ts 中的 base 改为 '/preview/'，然后重新构建。

访问方式

预览端部署后，通过 URL 参数指定要预览的项目和页面：

URL	说明
https://preview.your-domain.com/?app_uid=app_xxx	预览项目的首页
https://preview.your-domain.com/?app_uid=app_xxx&page_uid=page_xxx	预览项目的指定页面
https://preview.your-domain.com/	预览 .env 中 VITE_APP_UID 指定的项目