Umbraco 14无头模式集成Vue3：配置与预览问题咨询

云原生阿岚

2026-6-19

问题：Umbraco v14无头模式对接Vue3的配置与预览问题

背景与需求

基于Umbraco v14搭建CMS，通过内容交付API对接Vue3前端
核心需求：
1. 后台可添加空白页面，插入「Hero 1」「产品展示」「图文模块」等预定义区块
2. 区块填写信息后支持发布前预览效果
3. Vue端获取已添加页面数据，遍历预定义区块并按自定义样式渲染

已完成配置

Umbraco后台操作

创建名为「Page Template」的文档类型，采用区块列表作为内容字段
定义「Hero Block 1」「Text Image Block」两个区块类型
可在Home节点下创建如「Contact」的页面，并为页面配置区块内容

Vue前端实现

通过内容交付API获取数据，请求代码：

async fetchPageData() {
  try {
    const response = await axios.get(`/umbraco/delivery/api/v2/content`);
    console.log(response.data.items)
  } catch (error) {
    console.error('Error fetching page data:', error);
  }
}

遍历pageTemplate类型页面的区块并渲染，组件代码：

<div v-for="block in pageData.blocks" :key="block.title">
  <hero-block
    v-if="block.blockType === 'heroBlock'"
    :title="block.title"
    :subtitle="block.subtitle"
    :imageURL="block.imageUrl"
    :ctaButton="block.ctaButton"
  ></hero-block>
  <text-image-block
    v-if="block.blockType === 'textImageBlock'"
    :title="block.title"
    :text="block.text"
    :imageURL="block.imageUrl"
  ></text-image-block>
</div>