对话式营销平台的核心是把销售话术、用户意图识别和界面反馈变成可拖拽、可热更新的前端能力。Vue 3 提供的响应式系统和工程化工具链，使这类业务从堆砌弹窗进化为统一会话引擎。下面以实际项目结构为例，说明如何用 Vue 3 搭建可维护的对话式营销前端。
架构分层与 Monorepo 工程规划
在启动对话式营销平台时，最先要解决的是代码边界问题。如果投放页、运营后台和埋点 SDK 混在同一个仓库，迭代节奏会被相互阻塞。我们使用 pnpm workspace 建立 Monorepo，将项目拆分为 @marketing/core、@marketing/console 与 @marketing/sdk 三个包。core 负责会话状态机和渲染协议，console 提供可视化编排，sdk 用于外部站点嵌入。
这种拆法让对话逻辑与界面解耦。运营在 console 中配置完流程，导出一份 JSON schema，core 包内的渲染器读取 schema 生成组件树。由于 Vue 3 的 defineAsyncComponent 支持按节点懒加载，只有用户走到某分支才请求对应话术组件，首屏体积下降约四成。类型定义放在根目录的 types 包，三方包共享同一套 TS 接口，避免前后端字段漂移。
构建层面，根目录用 Turbo 做任务编排，build、lint、test 按依赖拓扑并行。当 core 修改后，仅 sdk 与 console 中被引用的部分重新打包。对比旧版单仓 webpack，全量构建从三分半降到四十秒，本地启动借助 Vite 的 esbuild 预编译基本秒开。
会话组件抽象与组合式逻辑复用
对话式营销的界面元素高度相似：气泡、选项按钮、表单卡片。如果每个活动复制一份 Vue 文件，后期改样式就是灾难。我们抽象出基础构件 ChatBubble、ChoiceGroup，业务层通过 props 传入文案与跳转条件。复杂交互如“发券后追问满意度”用组合式函数 useFollowUp 封装，内部监听 Pinia 的会话状态，触发回调。
组合式 API 的优势在跨组件共享逻辑时尤其明显。比如用户中途离开，再次进入要恢复上下文，useSessionRestore 会从本地缓存读取 sessionId 并调用 core 的 resume()。该函数不依赖具体组件，在 SDK 和 console 预览里都能直接用。下面代码展示一个最简会话钩子：
import { ref } from 'vue';
import { useChatStore } from '@marketing/core/store';
// 组合式函数：管理单轮问答
export function useQuestionFlow() {
const store = useChatStore();
const current = ref(store.currentNode);
function answer(option) {
// 更新会话状态机
store.next(option.value);
current.value = store.currentNode;
}
return { current, answer };
}
上面这段逻辑在多个活动页复用，测试时只需 mock useChatStore 即可。如果放在 Options API 的 methods 里，就得依赖组件实例，难以单独验证。工程化角度，我们把这类组合式函数归入 core/composables，通过单元测试覆盖率卡点，确保营销逻辑变更不会悄悄破坏旧活动。
构建优化与低代码投放实践
对话式营销常需嵌入第三方官网，SDK 体积直接影响跳出率。我们用 Vite 的 rollup 配置做三层切片：运行时、渲染器、活动包。运行时只含 Vue reactivity 与最小 DOM 桥接，约 12KB gzip；渲染器按需注入；活动包由运营导出后动态加载。这样外部站点引入 sdk.min.js 不会阻塞主页。
低代码部分，console 产出 schema 后，通过 CI 上传到 CDN，前端用 fetch 拉取并交给 core 的 SchemaRenderer。该渲染器把 JSON 映射为 Vue 组件，支持条件分支与 A/B 测试字段。以下为简化渲染片段：
<template>
<div class="chat-root">
<component
v-for="node in schema.nodes"
:is="resolveType(node.type)"
:key="node.id"
:data="node"
@pick="onPick"
/>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
props: ['schema'],
setup(props) {
const map = {
bubble: 'ChatBubble',
choice: 'ChoiceGroup'
};
function resolveType(t) {
return map[t] || 'ChatBubble';
}
function onPick(val) {
// 通知状态机
console.log('user pick', val);
}
return { resolveType, onPick };
}
};
</script>
工程化流程里，schema 变更走独立流水线，自动跑视觉回归。若新话术在某浏览器错位，机器人会评论到 PR，运营无需懂代码也能看到预览。借助 Vue 3 的响应式追踪，仅被修改节点重渲染，长会话也不卡顿。最终平台支撑日均两千万次对话渲染，发版频率从双周提升至按小时热更。