Nuxt 3使用动态组件实现自定义字符串插值遇运行时编译问题求助

开发者阿泽

2026-7-24

解决Vue动态组件运行时编译不支持的问题

问题原因

你遇到的警告是因为Vue默认使用runtime-only构建版本，这个版本不支持在运行时编译动态模板字符串。而你通过动态组件的template选项传入了字符串模板，触发了运行时编译的需求，所以出现了这个错误。

解决方案

1. 启用Nuxt的Vue运行时编译器

修改nuxt.config.ts，添加vue.runtimeCompiler: true配置，让Vue使用带编译功能的构建版本：

// nuxt.config.ts
export default defineNuxtConfig({
  ssr: false,
  vue: {
    runtimeCompiler: true
  }
});

2. 优化模板插值逻辑（可选但推荐）

你当前用手动字符串替换实现插值，这种方式无法利用Vue的响应式特性。建议改用Vue原生的模板语法{{}}，并通过props传递变量，这样变量更新时模板会自动响应：

<template>
  <h4>Hi!</h4>
  <component
    :is="{
      template: dynamicTemp,
      props: ['name'] // 声明组件接收的props
    }"
    :name="firstName" // 传递变量到动态组件
  />
</template>
<script setup lang="ts">
const firstName = "Joe";
const useInputContent = "<h3>Welcome {{name}}</h3>";
const dynamicTemp = useInputContent; // 无需手动替换，Vue会自动编译插值
</script>

替代方案：用`v-html`实现简单插值（无需开启编译）

如果你的场景只是静态字符串替换，不需要动态组件的其他特性，可以直接用v-html指令，这样不需要修改Nuxt配置：

<template>
  <h4>Hi!</h4>
  <div v-html="dynamicContent"></div>
</template>
<script setup lang="ts">
const firstName = "Joe";
const useInputContent = "<h3>Welcome {name}</h3>";
const dynamicContent = useInputContent.replace("{name}", firstName);
</script>