---
title: 保存、发布与嵌入
source: https://vjmap.com/guide/visual/publish.html
---

---
group: AI 与发布
description: 保存与历史版本、发布运行态链接、导出静态运行包和二次开发工程包、另存为工程文件，以及用 SDK 把大屏嵌进自己的系统。
---

# 保存、发布与嵌入

大屏做好后有三种交付方式：**发布**得到一个运行态链接，直接打开或投屏；**导出部署文件**，放到自己的服务器上离线运行；**用 SDK 嵌入**，在自己的系统里加载工程、推送数据、响应交互。本篇按「保存 → 发布 → 部署 → 嵌入」的顺序介绍，例子沿用[新手入门](./quickstart.html)做的销售看板。

## 保存

按 `Ctrl+S` 或点顶栏「保存」，工程保存到服务器，顶部提示「已保存到服务端」。保存的是草稿：首页卡片显示「草稿」，运行态链接还是上次发布的内容。

编辑器不会自动保存。关闭页面或刷新前记得保存；如果只是打开别人的示例看看，不保存就不会改动它。

## 历史版本

每次保存时，如果内容和上一份不同，上一份会自动归档成历史版本。点顶栏「历史」查看：

![历史版本](./images/publish-history.webp)

1. **当前版本**：编辑器里正在编辑的这一份。
2. **历史记录**：按保存时间排列，最多保留 30 条未固定的记录，更早的自动清理；内容相同的稿不会重复归档。
3. **还原 / 备注 / 固定 / 删除**：「还原」用这条历史替换当前稿，当前稿如果还没归档会先存一条，不会丢；「备注」写一句说明，方便以后找；「固定」的记录不会被自动清理。

::: tip 小技巧
做大改动之前先保存一次，并给这条历史写个备注、点「固定」，相当于手动存了一个还原点。
:::

## 发布

点顶栏右侧的「发布」，生成线上版本：

![发布成功](./images/publish-done.webp)

1. **运行态地址**：`https://vjmap.com/server/vp/view?project=<工程 ID>`，打开就是全屏的运行态，不需要登录。
2. **复制链接**：复制运行态地址，发给别人或配到投屏设备上。
3. **打开运行态**：在新标签页打开。

发布后首页卡片变成「已发布」。之后再改工程并保存，卡片会回到「草稿」，运行态仍是上次发布的内容，直到再次发布。

## 项目部署

顶栏「项目 → 项目部署...」把发布相关的操作集中在一起，分两个页签。

### 发布 Web 链接

![项目部署：发布 Web 链接](./images/publish-deploy-web.webp)

1. **两个页签**：「发布 Web 链接」和「导出部署文件」。
2. **运行链接**：当前的运行态地址，右边是「重新发布」和「复制」。还没发布过时，这里提示先发布。
3. **运行域名**：留空时运行态由平台自己的 `/view` 页面承载，发布后直接能打开；私有化部署时如果把运行态单独部署成一个站点，在这里填它的地址，运行链接会跟着变。

### 导出部署文件

不想依赖平台服务器，或者要在内网、离线环境里运行，就导出部署文件：

![项目部署：导出部署文件](./images/publish-deploy-export.webp)

1. **导出类型**：
   - **运行包（静态）**：一个压缩包，解压后用任意静态服务器（Nginx、IIS、对象存储等）打开 `index.html` 就能运行，适合直接交付。
   - **二次开发工程包**：一个 Vite + Vue 源码工程，内置运行时 SDK、工程数据和入口回调；解压后执行 `pnpm i && pnpm build` 就能再开发、编译和部署，产物在 `dist/`，回调写在 `src/hooks.ts`。
2. **选项**：「将动态数据源转换为静态（离线自包含）」会把接口、WebSocket、平台数据等动态数据源冻结成当前数据，适合完全离线演示；「附带原始工程文件」会在包里放一份 `.vpproj.json`，以后可以再导入编辑器修改。
3. **导出部署文件**：生成并下载压缩包。

::: warning 注意
导出前先保存。如果工程用了平台数据表或素材库里的图片，离线运行时这些地址可能访问不到，需要勾选「转换为静态」，或者确认运行环境能访问平台服务器。
:::

## 另存为工程文件

顶栏「项目 → 另存为」（`Ctrl+Shift+S`）把工程导出成文件，用于备份、在两台服务器之间搬工程，或交给开发人员：

![另存为](./images/publish-saveas.webp)

1. **文件名**：默认是工程名。
2. **格式**：
   - **工程文件（.vpproj.json）**：纯数据，可在首页「导入项目文件」再次载入。
   - **工程包（.vpproj.zip，含素材）**：连同引用的图片等素材一起打包，换服务器时选它。
   - **工程代码（.vp.tsx）**：把工程导出成一份可读的代码，适合让 AI 或开发人员整体修改后再导回。
   - **TSX 工程包（.zip，可独立编译）**：代码形式的完整工程。
3. **将动态数据源转换为静态**：先刷新一次数据，再把接口等动态数据源内联为当前快照。
4. **导出**：下载文件。

::: tip 小技巧
工程文件里引用的本服务器图片，换一台服务器就会失效。要整体搬走，选「工程包」。
:::

## 嵌入到自己的系统

按集成深度从浅到深，有三种做法：

| 做法 | 怎么做 | 适合 |
|---|---|---|
| 运行包 + iframe | 导出「运行包（静态）」放到自己的服务器，在业务页面里用 iframe 引用它的 `index.html` | 只是展示，不需要和业务系统交互 |
| 二次开发工程包 | 导出「二次开发工程包」，在 `src/hooks.ts` 里写回调，编译后部署 | 需要推送数据、响应点击、切换页面 |
| SDK | 在自己的前端工程里引入运行时 SDK，用 `createVpViewer` 加载工程文件 | 已有前端工程，想把大屏当一个组件嵌进去 |

SDK 的用法很简单，第一个参数是挂载容器，第二个是工程文件的内容：

```ts
const ctx = createVpViewer('#app', body /* 工程文件内容 */, {
  params: { region: '华东' },   // 项目参数，按用户或场景显示不同内容
  onReady(ctx) {
    console.log('页面数：', ctx.screens.length)
  },
})

// 替换某个数据源里某张表的数据，绑定它的组件自动重绘
ctx.setData('<连接 ID>', '<表 ID>', rows)
```

连接 ID 和表 ID 可以在导出的工程文件里查到。返回的 `ctx` 还能切换页面、打开或关闭弹窗、查找组件、修改组件属性、监听交互事件。完整接口见开发文档的 [SDK 与扩展开发](https://vjmap.com/app/docsvp/extend/)，[AI 可视化平台示例](https://vjmap.com/app/demovp)里有几百个可以在线修改运行的 SDK 示例。

::: tip 私有化部署
唯杰 AI 可视化平台可以私有化部署在内网（Windows 免安装版或 Linux Docker 离线包），部署后编辑器、运行态和 AI 助手都在自己的服务器上，运行态链接也可以直接嵌进内网系统。部署方式可以[联系我们](/contact)。
:::