1. 为什么 Vue 老项目接不进低代码平台

很多团队在评估低代码平台时，卡点从来不是"能不能拖拽出一个新页面"，而是"我手上这几十个已经跑了两年的 Vue 页面怎么办"。新建页面演示起来很爽，可一旦要把存量工程搬进去，就会发现组件对不上、路由结构对不上、数据源对不上，最后低代码平台变成一套和主业务并行维护的孤岛系统，推广两周就没人用了。

TinyEngine 2.11 这次把 Vue to DSL 做成了完整链路，解决的正是这个"存量资产复用"问题。它支持把 Vue 单文件、项目目录、zip 包三种形态解析成 TinyEngine 的 DSL schema，再导入成页面、区块、资源和依赖数据，导入后可以直接在设计器里继续编辑和预览。换句话说，你原来的 Vue 代码不是被丢掉，而是被"翻译"成了低代码平台能理解的中间表示。

与此同时，2.11 把 AI 能力塞进了画布节点本身。以前接 AI 是单独开个对话框，你复制代码过去、它给你一段建议、你再手动贴回来，链路是断的。现在每个画布节点上都有 AI 助手入口，会话结束后可以选择采纳、放弃或重新发起，AI 真正进入了编辑主流程。这两个能力叠加起来，才是这次版本的核心价值：存量 Vue 能进来，进来之后还能用 AI 快速改。

这篇文章我会按"Vue 工程怎么解析成 DSL → 转换配置怎么写 → 怎么用统一 Key 通道把模型接进画布 → 导入后怎么校验"的顺序讲一遍，每一步都给可复制的配置和命令。适合正在做低代码平台选型、或者手里有一堆 Vue 页面想低成本迁移的前端同学。

需要先说明一点：TinyEngine 本身是开源引擎，AI 能力需要你自己接模型服务。下面我会用 TaoToken 作为统一 API 通道来演示，因为它把 Key 管理和多模型调用收敛到一个入口，配置起来比逐个对接省事。

2. 前置准备：TaoToken 统一 Key 与 TinyEngine 环境

在动手做 Vue 转 DSL 之前，先把两件事准备好：一个是 TinyEngine 的本地工程，一个是模型调用的统一通道。很多人卡在第二步，因为 TinyEngine 的 AI 助手、robot 插件、dsl-generator skill 都需要一个能稳定调用的模型端点，如果每个插件各配一套 Key，维护起来会很乱。

TaoToken 在这里的作用是提供一个统一的 Base URL 和 Key，让 TinyEngine 里的 AI 相关插件都指向同一个入口。你不需要在多个地方重复填 Key，也不用担心某个插件换了模型之后其他插件失效。

先拿到访问凭证。打开控制台创建 API Key：

https://taotoken.net/api-keys?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content=api_keys

创建完之后你会得到两样东西，后面配置里会反复用到：

这里有个容易踩的坑：Base URL 一定要用https://taotoken.net/api这个形式，不要自己在后面拼/v1或者/chat/completions，不同插件的拼接逻辑不一样，多写一段反而会 404。Model ID 也要和你实际开通的模型对齐，填错了会直接返回模型不存在的错误。

接着准备 TinyEngine 工程。官方仓库在 GitHub 上，克隆下来装依赖：

git clone https://github.com/opentiny/tiny-engine.git cd tiny-engine pnpm install pnpm dev

启动后默认会跑起来设计器。如果你要用 2.11 新增的 file 模式（把 mockserver 文件当数据库），启动命令换成：

pnpm dev:file

file 模式的意义在于：接口数据从data/**/*.json文件里读写，而不是走内存 db。这样本地 AI Agent 生成的页面 DSL 可以直接落到文件里，设计器刷新就能看到，非常适合做"AI 生成 → 人工校验"的闭环。

环境准备好之后，先别急着导 Vue。建议先用一个最简单的单文件跑通全流程，确认模型通道是通的，再去处理复杂的项目目录。顺序反了的话，出问题你分不清是转换逻辑的锅还是模型配置的锅。

3. 可复制配置：Vue 转 DSL 与模型接入片段

这一节是全文最需要照着抄的部分。我会给出三类配置：模型接入的 settings 片段、Vue 转 DSL 的转换配置、以及 dsl-generator skill 的调用方式。路径和字段名都按 TinyEngine 2.11 的实际结构来写。

先说模型接入。TinyEngine 的 robot 插件和节点 AI 助手共用同一套配置，所以你只需要配一次。在项目里找到模型管理的配置文件（通常在packages/下的配置目录，或者通过设计器的模型管理面板写入），核心字段是这三个：

{ "modelName": "claude-sonnet-4-5", "baseUrl": "https://taotoken.net/api", "apiKey": "sk-你的Key", "provider": "openai-compatible", "maxTokens": 4096, "temperature": 0.3 }

注意provider字段。TinyEngine 的 AI 插件大多走 OpenAI 兼容协议，所以填openai-compatible最稳。temperature建议压到 0.3 左右，因为画布节点修改和 DSL 生成都属于"要精确"的任务，温度太高会给你改出莫名其妙的样式。

如果你用的是 Claude Code 这类本地 Agent 来调 dsl-generator skill，配置写在settings.json里：

{ "env": { "ANTHROPIC_BASE_URL": "https://taotoken.net/api", "ANTHROPIC_API_KEY": "sk-你的Key", "ANTHROPIC_MODEL": "claude-sonnet-4-5" } }

这里ANTHROPIC_BASE_URL同样只写到/api，不要带/v1。Claude Code 会自己在后面拼路径，你多写一段就会变成/api/v1/v1/messages这种畸形地址，直接 404。

再说 Vue 转 DSL 的转换配置。2.11 的导入入口支持单文件、目录、zip 三种，转换过程会做组件映射。你需要在转换配置里声明 Vue 组件到 TinyEngine 物料的对应关系，否则解析出来的 DSL 里会出现一堆"未知组件"：

{ "input": { "type": "directory", "path": "./src/views/dashboard" }, "output": { "format": "tinyengine-dsl", "target": "./data/pages/dashboard.json" }, "componentMapping": { "el-button": "TinyButton", "el-input": "TinyInput", "el-table": "TinyGrid", "el-dialog": "TinyDialog", "van-button": "TinyButton" }, "options": { "parseScript": true, "parseStyle": true, "extractI18n": true, "extractDataSource": true } }

componentMapping是转换质量的关键。左边是你 Vue 工程里实际用的组件标签，右边是 TinyEngine 物料库里的组件名。映射写全了，导入后画布上就是可编辑的正常节点；写漏了，那些节点会以占位形式出现，你得手动一个个替换。

options里几个开关的含义：parseScript决定是否解析<script>里的逻辑并转成 DSL 的数据源/状态；parseStyle处理样式；extractI18n把文案抽到 i18n 面板；extractDataSource把接口调用抽成数据源配置。这四个建议全开，导入后的面板才完整。

最后是 dsl-generator skill 的调用。2.11 在项目里加了项目级 skill，目录结构是这样的：

.agents/skills/ # 支持 cursor / opencode / codex .claude/skills/ # 软链接指向 .agents/skills，支持 claude code

在 Claude Code 里调用它生成页面 DSL：

# 在项目根目录，确保已用 pnpm dev:file 启动 claude # 然后在会话里描述你要生成的页面 > 用 dsl-generator 生成一个带搜索栏和表格的列表页，写到 data/pages/user-list.json

生成完成后，data/pages/user-list.json里就是符合 TinyEngine schema 的 DSL，设计器刷新即可看到。这套流程配合 file 模式，等于让本地 AI Agent 直接往低代码平台里"写页面"。

4. 验证请求：确认模型通道与 DSL 生成结果

配置写完必须验证，不然你永远不知道是配置错了还是模型没响应。验证分两层：先验模型通道，再验 DSL 生成。

先验模型通道。最直接的方式是用 curl 打一次对话接口，确认 Base URL 和 Key 是通的：

curl https://taotoken.net/api/v1/chat/completions \ -H "Content-Type: application/json" \ -H "Authorization: Bearer sk-你的Key" \ -d '{ "model": "claude-sonnet-4-5", "messages": [{"role": "user", "content": "回复 OK 两个字母"}], "max_tokens": 16 }'

注意这里 curl 的路径是/api/v1/chat/completions，因为这是标准的 OpenAI 兼容路径，需要带/v1。而前面配置里的 Base URL 只写到/api，是因为插件会自己拼/v1/...。这两个地方容易搞混，记住原则：配置项填到/api，手动 curl 要补全到/v1/chat/completions。

如果返回里能看到choices数组和正常的 content，说明通道没问题。如果返回 401，说明 Key 错了或者没带上；如果返回 404，八成是路径拼错了。

通道通了之后，回到 TinyEngine 设计器验证画布 AI 助手。打开任意页面，点某个画布节点上的 AI 助手入口，发一句"把这个按钮的主色调改成蓝色，圆角改成 8px"。会话结束后会出现采纳、放弃、重新发起三个选项。点采纳，看画布上的节点是否真的变了。

这一步能验证三件事：robot 插件配置是否生效、节点 AI 助手是否连到了同一个模型、以及修改结果能否正确回写到 DSL。三个都通过，说明 AI 链路是完整的。

再验 Vue 转 DSL。拿一个简单的 Vue 单文件跑转换，导入后检查几个关键面板：

导入后点预览，看渲染结果和原 Vue 页面是否一致。2.11 在预览模式下会自动格式化生成的代码，脚本、模板、配置文件都会过一遍 Prettier，所以你在预览里看到的代码应该是可读的，不会是一坨压缩过的字符串。

如果预览时发现某个图表不显示，先别怀疑转换逻辑，去检查一下是不是命中了 2.11 修复列表里的"部分图表预览无法显示"那个问题——升级到最新版本通常就好了。

5. 常见报错排查：401、local proxy failed 与 choices 为空

这一节按真实报错来对。我在配 TinyEngine 的 AI 能力时，遇到最多的就是下面这几类，基本覆盖了 90% 的接入问题。

401 Unauthorized。这个最直接，Key 不对或者没带上。检查三处：settings.json 里的ANTHROPIC_API_KEY、模型管理配置里的apiKey、以及 curl 命令里的Authorization头。三处用的必须是同一个 Key。还有一种隐蔽情况：Key 复制的时候带了首尾空格，肉眼看不出来，但鉴权会失败。建议重新复制一次，别手动敲。

local proxy failed / connection refused。这个报错通常出现在你本地起了代理层，但代理没起来或者端口不对。TinyEngine 的某些插件会走本地代理转发请求，如果你在配置里填了http://localhost:xxxx这种地址，就要确保那个本地服务真的在跑。更省事的做法是直接把 Base URL 指向https://taotoken.net/api，不经过本地代理，少一层就少一个故障点。

reading 'choices' of undefined。这个报错的意思是：代码期望响应里有choices字段，但实际拿到的响应结构不对。常见原因有三个：一是 Base URL 多写了/v1，导致请求打到了错误路径，返回的是 HTML 错误页而不是 JSON；二是模型名填错了，服务端返回了错误对象；三是响应被某个中间层改写了。排查方法就是先用第 4 节的 curl 命令确认原始响应长什么样，再回头对配置。

OAuth / token 过期类报错。如果你用的是 Claude Code 这类带 OAuth 流程的工具，偶尔会遇到 token 失效。这时候不要反复重试，直接重新走一次授权，或者改用 API Key 方式（ANTHROPIC_API_KEY）绕过 OAuth。API Key 方式在自动化场景下更稳定。

导入 Vue 后组件全是占位。这不是报错，但比报错更烦。原因基本是componentMapping没写全。解决办法是把原 Vue 工程里用到的所有组件标签列出来，逐个对照 TinyEngine 物料库补映射。补完之后重新导入，占位就会变成正常节点。

dsl-generator 生成的 DSL 导入失败。先检查生成的 JSON 是否符合 TinyEngine 的 schema，重点看componentName字段是不是物料库里存在的名字。AI 生成的内容偶尔会"发明"一个不存在的组件名，这种导入时会被拦下来。遇到这种情况，直接在会话里让它"只用物料库里的组件重新生成"。

排查的核心思路就一条：先确认模型通道通不通，再确认配置路径对不对，最后才怀疑业务逻辑。顺序反了会浪费大量时间。

6. 把 AI 生成与回归验证接进日常流程

配置跑通只是开始，真正有价值的是把它变成日常流程的一部分。我自己的做法是：本地用pnpm dev:file起设计器，用 Claude Code 调 dsl-generator 生成页面 DSL 落到data/**/*.json，设计器刷新后人工校验，确认没问题再提交。这样 AI 生成的内容始终经过一道人工确认，不会直接污染主分支。

回归验证这块，2.11 在生成代码的单元测试上做了补充，你可以把导入后的页面预览结果和原 Vue 页面的截图做对比，重点看布局和交互是否一致。对于批量迁移的场景，建议先迁 3 到 5 个代表性页面，把componentMapping打磨稳定，再批量处理剩下的。一上来就全量迁，映射没调好会返工。

模型调用这块，如果你要长期跑 AI 生成任务，建议用 Coding Plan 这类按周期计费的方式，比按次调用更可控：

https://taotoken.net/coding-plan?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content=coding_plan

需要临时验证某个模型的效果，直接用模型对话页面试就行：

https://taotoken.net/chat?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content=model_chat

接入过程中如果遇到配置问题，文档里有各插件的完整字段说明：

https://taotoken.net/doc?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content=doc

最后提醒一个实操细节：data/**/*.json这些生成文件建议加进.gitignore的例外规则里单独管理，或者干脆提交到仓库。因为它们是设计器的"数据库"，丢了就得重新生成。我试过把整个 data 目录忽略掉，结果换台机器拉代码后设计器里空空如也，又得重新跑一遍生成，挺浪费时间的。