Symfony Vue.js Encore 无法挂载组件：未定义模板或渲染函数

Question

我正在尝试使用 symfony 设置 vue.js。 （这个 Vue.js 配置在 laravel 中正常工作，但 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();

web/assets/js/vue.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>

Twig 视图：（id 为 app 的 div 在 base.html.twig 中）

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

    <example-component></example-component>

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

构建编译成功，但在控制台中仍然出现此错误：

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

found in

---> <ExampleComponent>
       <Root>

我做错了什么？ 我不想像在 vue-loader 示例中那样将 vue 用作简单的页面应用程序，我只需要在不同的页面部分添加几个组件，就像在 laravel 中一样。

谢谢大家。

Answer 1

尝试将默认值添加到要求：

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