vue.js - Symfony Encore + Vue.js:“无法安装组件:未定义模板或渲染函数”
问题描述
我遇到了一个问题,不知道如何解决...我正在使用 Encore 构建所有资产,包括 Vue.js 组件。下面是我的 package.json 的 devDependencies:
{
"@symfony/webpack-encore": "^1.6.1",
"bootstrap": "4.4.1",
"core-js": "^3.0.0",
"file-loader": "^6.0.0",
"regenerator-runtime": "^0.13.2",
"sass-loader": "^10.2.0",
"vue": "^2.5",
"vue-loader": "^15.9.5",
"vue-template-compiler": "^2.6.14",
"webpack-notifier": "^1.6.0"
},
这是我的 webpack.config.js
Encore
// directory where compiled assets will be stored
.addPlugin(
new webpack.IgnorePlugin({
resourceRegExp: /^\.\/locale$/,
contextRegExp: /sonatacore\/vendor\/moment/,
})
)
.setOutputPath('public/build/')
// public path used by the web server to access the output path
.setPublicPath('/build')
.cleanupOutputBeforeBuild()
.enableSourceMaps(!Encore.isProduction())
.copyFiles({
from: './assets/images',
to: 'images/[path][name].[ext]',
})
// only needed for CDN's or sub-directory deploy
//.setManifestKeyPrefix('build/')
// .autoProvidejQuery()
/*
* 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 your JavaScript imports CSS.
*/
.addStyleEntry('css/main', './assets/css/main.scss')
.addStyleEntry('css/customAdmin', './assets/css/admin/customAdmin.scss')
.addEntry('js/app', './assets/js/app.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()
// enables @babel/preset-env polyfills
.configureBabelPresetEnv((config) => {
config.useBuiltIns = 'usage'
config.corejs = 3
})
// enables Sass/SCSS support
// Add base scss to all files so they are available everywhere
.enableSassLoader((options) => options.additionalData = `@import "${path.resolve(__dirname, './assets/css/base.scss')}";`)
//enable VueJS
.enableVueLoader(
() => {},
{runtimeCompilerBuild: false}
)
.addRule({
test: /\.vue$/,
loader: 'vue-loader'
})
.addAliases({
'vue$': 'vue/dist/vue.esm.js'
})
在我的 app.js 文件中,初始化了不同的 Vue 实例:
Vue.component('GeoDecisionMap', () => import('../components/geoDecision/GeoDecisionMap'))
Vue.component('DropdownCheckbox', () => import('../components/form/core/DropdownCheckbox'))
Vue.component('ChoiceClientModal', () => import('../components/modal/ChoiceClientModal'))
const vueContainers = document.getElementsByClassName('vue-container')
const vueContainersCount = vueContainers.length
if (vueContainersCount > 0) {
for (let i = 0; i < vueContainersCount; i++) {
new Vue({el: vueContainers[i]})
}
}
启动构建(encore dev)时,一切似乎都运行良好,构建成功。但是,当我访问包含 Vue 组件的页面时,它无法正常工作:组件未显示,并且我的浏览器控制台中出现错误
vue.esm.js:628 [Vue warn]: Failed to mount component: template or render function not defined.
found in
---> <GeoDecisionMap> at assets/components/geoDecision/GeoDecisionMap.vue
<Root>
有没有其他人遇到过这个?我究竟做错了什么 ?谢谢
解决方案
推荐阅读
- javascript - 只有在主页面登录后才能淡入淡出?
- angular - Angular 8:如何在没有 html 标签的情况下使用 ngFor。我尝试了 ng-container 但它不起作用
- sql-server - 将 DD/MM 与 SQLServer 中的 GetDate() 匹配
- angular - 搜索字段失去焦点
- json - 使用 Apache Beam 和数据流将许多 json 加载到 BQ - json 模式错误
- java - 通过将地图分成块来提高性能
- php - 远远超出 PHP 最大执行时间
- mongodb - 如何为微服务堆栈构建一个简单但可靠的 API 预付信用系统?
- python - 如何在具有容差的多列上加入熊猫数据框?
- sass - SCSS - 在类和 { 之间添加 &