发布与部署

搭好的大屏有多种交付方式：线上发布看链接、导出工程 JSON、导出二次开发工程包自行托管。本页讲清楚各自的产物与用法。

保存 vs 发布：两份数据

大屏在后端存两份互不干扰的数据：

• 保存（草稿）：Ctrl+S 只更新编辑态草稿，不影响线上。
• 发布（快照）：生成运行态快照，观看者始终看到最近一次发布的版本，你可放心继续编辑草稿。

原理详见架构原理 · 保存 vs 发布。

三种交付方式

方式	产物	适用
线上发布	一个公开 /view 链接（看最近发布快照）	直接分享 / 投屏 / 嵌 iframe
导出工程 JSON	一份 *.vpproj.json（纯数据）	版本管理、脚本生成、跨环境导入
导出工程代码（VP-TSX）	单文件 *.vp.tsx 或 TSX 工程包（.zip，自包含编译环境）	以代码方式改写整工程（人或 AI），编译回 *.vpproj.json
二次开发工程包	Vite + Vue 工程（内置运行时 SDK + 工程数据）	深度集成到自有系统、自行编译托管

导出 / 导入工程文件

• 导出：顶栏「另存为」（Ctrl+Shift+S）→ 选格式：工程文件（.vpproj.json）、**工程代码（.vp.tsx）**或 TSX 工程包（.zip）；可勾选「转换为静态」把接口 / 数据库等动态源内联为当前数据快照。
• 导入：首页「导入项目文件」→ 选择 *.vpproj.json → 还原大屏。
• VP-TSX 两种产物的区别：单文件 .vp.tsx 不含编译环境，回导需借助平台编译（编辑器 AI 的 page_apply_project 或仓库脚本）；TSX 工程包解压后 npm i && npm run build 即可脱离平台编译出 project.vpproj.json 再导入。详见 VP-TSX 双向环路。

工程 JSON 是纯数据、可版本管理、可脚本生成，是跨环境迁移的最稳方式。

二次开发工程包

编辑器「项目部署 → 导出二次开发工程包」生成一个 Vite + Vue 工程，内置运行时 SDK（含类型提示）与工程数据，可直接二开、编译、托管。

目录结构

.
├─ index.html
├─ src/
│  ├─ main.ts            入口：createVpViewer 挂载工程
│  ├─ hooks.ts           挂载选项：开发回调 + 程序化操作
│  ├─ examples/          成体系示例（基础/数据/事件/窗口/页面）
│  └─ data/project.json  工程数据（导出时注入，可手工替换）
└─ vendor/vp-runtime/    运行时 SDK（.mjs + .css + .d.ts）

本地开发与构建

pnpm i        # 或 npm i / yarn
pnpm dev      # 本地预览 http://localhost:5173
pnpm build    # 生产构建 → dist/
pnpm preview  # 预览构建产物

构建产物 dist/ 是纯静态资源（base: './'），可托管到任意静态服务器 / 对象存储 / CDN。

一行挂载

import { createVpViewer, type VpProjectBody } from '@vp/sdk'
import '../vendor/vp-runtime/vp-runtime.css'
import projectData from './data/project.json'
import { hooks } from './hooks'

const ctx = createVpViewer('#app', projectData as VpProjectBody, hooks)

挂载选项（在 hooks.ts 配置）

能力	入口
项目参数（千人千面）	params: { ... }（与 project.params 合并）
自定义组件	widgets: [{ type, module }]（见自定义组件开发）
数据注入 / 替换	transformData(body)（挂载前加工）
生命周期就绪	onReady(ctx)（拿到运行上下文）
交互脚本接管	onScript(command, ctx)（接管「执行脚本」动作）
行为事件监听	onBehavior(event, payload, ctx)

拿到 ctx 后即可程序化操作大屏（增删组件、推数、开窗、监听事件等），完整能力见 SDK 与扩展开发。

嵌入到 iframe / 现有页面

• 最简单：把 /view 公开链接放进 <iframe>。宿主页面可用 postMessage 连接器给大屏喂数据（见数据系统 · 连接器）。
• 更可控：用二次开发工程包 / SDK 直接挂载，用 ctx 双向通信。

---

延伸阅读：SDK 与扩展开发 · 自定义组件开发 · 二次开发脚本 · 工程文件结构 · 架构原理。