验证和Webpack Encore编译错误

Question

我创建了(目前独立的) API和一个VueJs (使用Vuetify)应用程序，并希望使用Symfony的webpack encore捆绑包将两者结合起来。

但是，当我想要构建前端应用程序时，在执行yarn run encore dev时会出现以下错误

(node:12500) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'length' of undefined
    at items.forEach.item (/Users/pguetschow/Projects/hosting-tool/node_modules/vuetify-loader/lib/loader.js:21:60)
    at Set.forEach (<anonymous>)
    at Object.getMatches (/Users/pguetschow/Projects/hosting-tool/node_modules/vuetify-loader/lib/loader.js:16:9)
    at Object.module.exports (/Users/pguetschow/Projects/hosting-tool/node_modules/vuetify-loader/lib/loader.js:106:64)
    at process._tickCallback (internal/process/next_tick.js:68:7)
(node:12500) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:12500) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

这是我的webpack.config.js

const Encore = require('@symfony/webpack-encore');
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin');

Encore
    .setOutputPath('public/build/')
    .setPublicPath('/build')
    .cleanupOutputBeforeBuild()
    .enableSourceMaps(!Encore.isProduction())
    .cleanupOutputBeforeBuild()
    .addEntry('js/main', './assets/js/main.js')
    .enableVueLoader()
    .enableBuildNotifications(true)
    .addPlugin(new VuetifyLoaderPlugin())
;
module.exports = Encore.getWebpackConfig();

有什么想法吗？独立的应用程序运行良好，我只需将其移动到assets/js文件夹即可。为此，我需要vuetify loader^1.2.2。

这是我的main.js

import Vue from 'vue'
import App from './App.vue'
import Vuetify from 'vuetify/lib'
import MultiFiltersPlugin from './plugins/MultiFilters'

import 'vuetify/src/stylus/app.styl'
import 'material-design-icons-iconfont/dist/material-design-icons.css'
import 'vuetify/dist/vuetify.min.css'

Vue.use(MultiFiltersPlugin);
Vue.use(Vuetify, {
    iconfont: 'md',
});

new Vue({render: h => h(App),}).$mount('#app');

Answer 1

这是一个来自this working example的示例webpack.config.js文件，它展示了如何让Symfony和v.2x一起合作：

var Encore = require('@symfony/webpack-encore');

// import vuetify-loader as a plugin here
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')

if (!Encore.isRuntimeEnvironmentConfigured()) {
    Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}

Encore
    .setOutputPath('public/build/')
    .setPublicPath('/build')
    .enableVueLoader() // <-- IMPORTANT: this loads Vue
    // NOTE: I put my Vue app in assets/vue which I think is non-standard
    //       but it allows me to structure my Vue app as I would in a non-Symfony app
    .addEntry('app', './assets/vue/main.js')
    .splitEntryChunks()
    .enableSingleRuntimeChunk()
    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
    .enableSourceMaps(!Encore.isProduction())
    .enableVersioning(Encore.isProduction())
    .configureBabel(() => {}, {
        useBuiltIns: 'usage',
        corejs: 3
    })
    // add VuetifyLoaderPlugin: THIS loads all of the Vuetify components
    .addPlugin(new VuetifyLoaderPlugin())
    // enables Sass/SCSS support
    .enableSassLoader(options => {
        options.implementation = require('sass')
        options.fiber = require('fibers')
    })
;

module.exports = Encore.getWebpackConfig();

注意，我不是一个真正的symfony开发人员，但这对我很有效。哈！