如何让Vue编译包含自定义组件的模板字符串

问题背景 #

我有一段通过请求动态获取的HTML字符串：

<p><strong>I'm testing the text.</strong></p><p>I'm testing the text.</p><p><CustomComponent v-model='test' />I'm testing the text.<CustomComponent2 v-model='test' /></p>

需要渲染内容、显示自定义组件并实现v-model的数据交互。原本打算手动解析AST生成渲染函数，但不清楚如何启用Vue的运行时编译，且项目基于客户端渲染。

解决方案 #

1. 启用Vue运行时编译

Vue默认使用运行时版本，不包含模板编译器，需要调整项目配置启用编译功能：

Vite + Vue3 配置
在vite.config.js中修改：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue({
    template: {
      compilerOptions: {
        // 标记自定义组件，避免被当作普通HTML标签
        isCustomElement: tag => tag.startsWith('Custom')
      }
    }
  })]
})

Webpack + Vue3 配置
在vue.config.js中修改：

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
      .tap(options => {
        options.compilerOptions = {
          isCustomElement: tag => tag.startsWith('Custom')
        }
        return options
      })
  }
}

2. 封装动态渲染组件

不用手动解析AST，直接用Vue的compile和h函数实现动态渲染：

<template>
  <component :is="renderComponent" />
</template>

<script setup>
import { compile, h } from 'vue'

const props = defineProps({
  // 动态获取的HTML字符串
  templateHtml: {
    type: String,
    required: true
  },
  // 模板中需要绑定的上下文数据
  dataContext: {
    type: Object,
    default: () => ({})
  }
})

// 编译模板并生成可渲染组件
const renderComponent = () => {
  const compiledTemplate = compile(props.templateHtml)
  // 传递上下文数据，实现v-model双向绑定
  return h(compiledTemplate, props.dataContext)
}
</script>

3. 使用示例

在业务组件中引入并使用封装好的渲染组件：

<template>
  <DynamicTemplateRenderer 
    :template-html="dynamicContent" 
    :data-context="{ test: testValue }" 
  />
</template>

<script setup>
import { ref } from 'vue'
import DynamicTemplateRenderer from './DynamicTemplateRenderer.vue'

// 模拟接口获取的动态内容
const dynamicContent = ref(`<p><strong>I'm testing the text.</strong></p><p>I'm testing the text.</p><p><CustomComponent v-model='test' />I'm testing the text.<CustomComponent2 v-model='test' /></p>`)
// 绑定的双向数据
const testValue = ref('初始测试值')
</script>

关键注意事项

• 自定义组件需全局注册，或在动态渲染组件的上下文中局部注册，否则编译时会提示组件未找到。
• 运行时编译会增加打包体积，若对体积要求严格，可考虑服务端预编译模板后再传递到客户端，但客户端渲染场景下运行时编译是更直接的方案。
• Vue2项目思路类似，需启用Vue.compile，并通过组件的render函数返回编译结果。

内容的提问来源于stack exchange，提问作者tomsma