Symfony Vue.js Encoreコンポーネントのマウントに失敗しました：テンプレートまたはレンダリング関数が定義されていません

Question

symfonyでvue.jsを設定しようとしています。 （これはlaravelで正しく動作設定をVue.jsが、symfonyはないと私は:(このプロジェクトのためにsymfonyを使用する必要があります）symfonyのドキュメントから構成され

webpack.config.js

var Encore = require('@symfony/webpack-encore'); 

Encore 
    // the project directory where all compiled assets will be stored 
    .setOutputPath('web/build/') 

    // the public path used by the web server to access the previous directory 
    .setPublicPath('/build') 

    // will create web/build/app.js and web/build/app.css 
    .addEntry('vue', './web/assets/js/vue.js') 

    .enableVueLoader() 
    ... 
; 

// export the final configuration 
module.exports = Encore.getWebpackConfig(); 

vue.jsでウェブ/資産/のJS/vue.js

import Vue from 'vue' 

Vue.component('example-component', require('./components/Example.vue')); 

const app = new Vue({ 
    el: '#app' 
}) 

例コンポーネント：

<template> 
    <div> 
     Hello! 
    </div> 
</template> 

<script> 
    export default { 
     mounted() { 
      console.log('Component mounted.') 
     } 
    } 
</script> 

小枝ビュー：

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

found in 

---> <ExampleComponent> 
     <Root> 

は私が間違って何をやっている：

{% extends 'base.html.twig' %} 
{% block content %} 

    <example-component></example-component> 

    ... 
{% endblock %} 
{% block jsvendors %} 
{% endblock %} 

正常にコンパイルビルドが、コンソールではまだこのエラーを取得（IDアプリでdivがbase.html.twigですか）？ 私はvue-loaderのような単純なページアプリケーションとしてvueを使いたくないのですが、laravelと同じように、別のページセクションにほんのわずかなコンポーネントしか追加する必要はありません。

ありがとうございます。

Answer 1

が要求するようにデフォルトを追加しよう：

Vue.component('example-component', require('./components/Example.vue').default);