Symfony Vue.js Encore 구성 요소를 마운트하지 못했습니다 : 템플릿 또는 렌더링 함수가 정의되지 않았습니다.

Question

심포니로 vue.js를 설정하려고합니다. (이 Vue.js의 설정은 laravel에서 제대로 작동하지만, 심포니하지 나는이 프로젝트 :(위한 심포니를 사용해야합니다) 심포니 문서에서 구성

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 앱 사업부는 base.html.twig에)? vue를 vue-loader 예와 같이 간단한 페이지 응용 프로그램으로 사용하고 싶지 않습니다. laravel처럼 다른 페이지 섹션에 구성 요소를 몇 개 추가해야합니다.

감사합니다.

Answer 1

는 기본이 요구하는 추가하려고 :

이

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