Question

尽管有很多类似的问题，但是找不到适合我的答案。本质上，这是我非常简化的Vue单文件组件：

Listing.vue：

<template>
  <section class="main">
    Component
  </section>
</template>

<script>
  export default {
    name: 'todoapp-listing',
    …
  }
</script>

现在，我需要在Web组件中呈现它：

wrapper.js：

import Vue from 'vue';
import Listing from './src/Listing.vue';

class Wrapper extends HTMLElement {
  connectedCallback() {
    const appWrapper = document.createElement("div");
    appWrapper.classList.add('todoapp');

    this.attachShadow({ mode: "open" }).appendChild(appWrapper);

    new Vue({
      render: h => h(Listing),
    }).$mount(appWrapper);
  }
}

customElements.define("custom-wrapper", Wrapper);

将此Web组件添加到页面中时，我在控制台中得到以下内容：

[Vue warn]: Failed to mount component: template or render function not defined.

found in

---> <Listing> at src/Listing.vue
       <Root>

尝试将vue$别名添加到webpack配置中。没有帮助。 Babels正在@babel/preset-env上运行。

我在这里想念什么？

Vue的另一个“无法安装组件：模板或渲染功能未定义”

0 个答案: