我正在尝试用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 %}
Build编译成功，但在控制台中仍然出现此错误：
[Vue warn]: Failed to mount component: template or render function not defined.
found in
---> <ExampleComponent>
<Root>
我究竟做错了什么？我不想像在vue-loader示例中那样使用vue作为简单的页面应用程序，我需要在不同的页面部分中添加少量组件，就像在laravel中一样 .
谢谢你们 .
1 回答
尝试将默认值添加到require：