Vue点击按钮新增组件无响应，配置runtimeCompiler仍报错如何解决？

核心问题1：Comp 变量未定义 #

你在代码中全局注册的组件名称是 component，但 data 初始化和点击新增时使用的 Comp 没有任何定义，属于无效值，所以动态组件无法正常渲染。

核心问题2：runtimeCompiler 配置兼容问题 #

Electron + Vue 项目中，部分脚手架配置不会自动把 runtimeCompiler 配置注入到 Electron 渲染进程的 Vue 实例中，改用 render 函数定义组件可以完全避开对模板编译器的依赖，不需要额外配置就能正常运行。 #

修复后的可运行代码 #

<template>
<v-row>
    <component
    v-for="(component, index) in components"
    :key="index"
    :is="component"/>
</v-row>

<v-row justify="left" class="ml-3">
    <v-btn class="elevation-7 grey darken-1 btn" @click="add">Click me</v-btn>
</v-row>
</template>

<script>
// 直接用render函数定义组件，不需要依赖模板编译器
const Comp = {
  render: h => h('p', 'component')
}

export default {
  data: () => {
    return {
      components: [Comp]
    };
  },
  methods: {
    add () {
      this.components.push(Comp)
    }
  }
}
</script>

坚持使用template写法的检查项 #

如果你一定要用template语法定义组件，确认以下两点：

• 确认vue.config.js放置在项目根目录，配置内容正确：

module.exports = {
  runtimeCompiler: true
}

• 修改配置后必须完整重启Electron开发服务，仅热更新不会加载新的vue.config.js配置。

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