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和Vuetify（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开发人员，但这对我有用。 HTH！

Vuetify和Webpack Encore编译错误

1 个答案: