我正在将Vue集成到Symfony 4项目中,并且遵循了所有我能找到的规则。但是出于某种原因,我无法显示任何Vue组件 - 我甚至无法从我的app.js文件夹执行console.log。
这是app.js:
var Vue = require('vue');
import App from './components/App'
console.log('testing')
new Vue({
el: '#app',
template: '<App/>',
components: { App },
});
这是webpack.config文件:
var Encore = require('@symfony/webpack-encore');
Encore // 编译后的资源存储目录 .setOutputPath('public/build/') // web服务器访问资源的公共路径 .setPublicPath('/build') // 仅用于CDN或子目录部署 //.setManifestKeyPrefix('build/')
/*
* ENTRY CONFIG
*
* Add 1 entry for each "page" of your app
* (including one that's included on every page - e.g. "app")
*
* Each entry will result in one JavaScript file (e.g. app.js)
* and one CSS file (e.g. app.css) if you JavaScript imports CSS.
*/
.addEntry('app', './assets/js/app.js')
//.addEntry('page1', './assets/js/page1.js')
//.addEntry('page2', './assets/js/page2.js')
// will require an extra script tag for runtime.js
// but, you probably want this, unless you're building a single-page app
.enableSingleRuntimeChunk()
/*
* FEATURE CONFIG
*
* Enable & configure other features below. For a full
* list of features, see:
* https://symfony.com/doc/current/frontend.html#adding-more-features
*/
.cleanupOutputBeforeBuild()
.enableBuildNotifications()
.enableSourceMaps(!Encore.isProduction())
// enables hashed filenames (e.g. app.abc123.css)
.enableVersioning(Encore.isProduction())
// enables Sass/SCSS support
// .enableSassLoader()
.enableSassLoader(function(options) {}, {
resolveUrlLoader: false
})
// uncomment if you use TypeScript
//.enableTypeScriptLoader()
// uncomment if you're having problems with a jQuery plugin
.autoProvidejQuery()
.enableVueLoader()
;
module.exports = Encore.getWebpackConfig();
这是我的模板:
{% block content %}
<div id="app"></div>
{% endblock %}
就像我说的那样,即使从 app.js 直接使用 console.log,控制台也不会显示任何内容。我确定构建进程已经获取了 app.js 文件,因为在我的资源中,我看到加载了 app.####.js(哈希版本),并且其中包含我编写的代码。
{{ encore_entry_script_tags('app') }}
- Carlos Frias