运行时将自定义标记转换为Vue组件的实现方案咨询

方案1：正确配置运行时编译器并使用compile函数 #

如果你的项目是Vue 3 + Vite，先确保引入带编译器的Vue版本：

1. 修改vite.config.js：

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

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      'vue': 'vue/dist/vue.esm-bundler.js' // 切换到带编译器的Vue构建版本
    }
  }
})

2. 在组件中编译动态字符串为渲染函数：

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

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

// 你的自定义标记转换函数
function transformMarkdown(rawStr) {
  // 这里是你的转换逻辑，示例：
  return rawStr.replace(/''(.*?)''/g, '<b>$1</b>')
               .replace(/\{r=(\w+) (\w+)\}/g, '<Ref path="/$1">$2</Ref>')
}

// 从JSON获取原始内容并转换
const rawContent = "The ''sun'' is {r=black black}"
const transformedTemplate = transformMarkdown(rawContent)

// 编译模板字符串为渲染函数
const renderContent = compile(transformedTemplate)
</script>

方案2：使用h函数手动构建VNode（适合复杂组件场景） #

如果不想用运行时编译器，可以把转换后的内容拆解，手动用h函数创建虚拟节点，比如：

<template>
  <div ref="contentContainer"></div>
</template>

<script setup>
import { h, render } from 'vue'
import Ref from './Ref.vue' // 导入你的自定义组件

function transformToVNodes(rawStr) {
  // 这里可以根据你的自定义标记，拆分内容并生成对应的VNode
  // 示例简化处理：
  const parts = rawStr.split(/(''|{r=.*?})/)
  return parts.map(part => {
    if (part.startsWith(''')) {
      return h('b', null, part.slice(2, -2))
    } else if (part.startsWith('{r=')) {
      const [_, path, text] = part.match(/\{r=(\w+) (\w+)\}/)
      return h(Ref, { path: `/${path}` }, text)
    } else {
      return part
    }
  })
}

const rawContent = "The ''sun'' is {r=black black}"
const vNodes = transformToVNodes(rawContent)
const container = ref(null)

onMounted(() => {
  render(h('p', null, vNodes), container.value)
})
</script>

注意事项 #

• 运行时编译会增加包体积，如果是生产环境且内容来源可控，才建议使用。
• 务必对用户输入的内容做XSS过滤，避免恶意代码注入。

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