Vue2使用vue-email-editor报错求助及版本降级解决情况

报错信息 #

• vue.runtime.esm.js?c320:4573 [Vue warn]: Error in render: "TypeError: (0 , external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock) is not a function"
• TypeError: (0 , external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock) is not a function at Proxy.EmailEditorvue_type_template_id_eb864766_scoped_true_render (vue-email-editor.common.js?8479:21986:1)
• Uncaught Error: Could not find a valid element for given id or className

项目代码（App.vue） #

<template>
  <div id="app">
    <h2>unlayer</h2>
    <div class="container">
      <div id="bar">
        <h1>Vue Email Editor (Demo)</h1>

        <button v-on:click="saveDesign">Save Design</button>
        <button v-on:click="exportHtml">Export HTML</button>
      </div>

      <EmailEditor ref="emailEditor" v-on:load="editorLoaded" />
    </div>
  </div>
</template>

<script>
import { EmailEditor } from 'vue-email-editor';
import sample from './data/sample.json';

export default ({
  components: {
    EmailEditor,
  },
  data() {
    return {
    };
  },
  methods: {
    editorLoaded() {
      // Pass your template JSON here
      // this.$refs.emailEditor.editor.loadDesign({});
      console.log('editorLoaded');
      this.$refs.emailEditor.editor.loadDesign(sample);
    },
    saveDesign() {
      this.$refs.emailEditor.editor.saveDesign(
        (design) => {
          console.log('saveDesign', design);
        },
      );
    },
    exportHtml() {
      this.$refs.emailEditor.editor.exportHtml(
        (data) => {
          console.log('exportHtml', data);
        },
      );
    },
  },
});
</script>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;}
</style>

原因分析 #

1. 核心兼容性冲突：vue-email-editor@2.x版本已完全适配Vue 3，组件内部使用了Vue 3独有的编译时API（如openBlock），而你的项目基于Vue 2，Vue 2中不存在这些API，直接触发渲染错误。
2. 连锁报错逻辑：第三点的Could not find a valid element是前序渲染错误的连锁反应——组件因API不兼容无法正常挂载初始化，导致unlayer核心找不到对应的渲染容器元素。
3. 版本适配对应关系：
   • vue-email-editor@0.x分支（如你使用的0.7.2）是专门为Vue 2设计的兼容版本
   • vue-email-editor@2.x及以上版本仅支持Vue 3环境

总结 #

若项目仍基于Vue 2，需持续使用vue-email-editor的0.x分支版本；若要升级到2.x版本，需先将项目迁移至Vue 3框架。

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