Vue 加载器 17.0.0 + Webpack 5.74.0 - 模块构建失败

Question

Vue 加载器 17.0.0 + Webpack 5.74.0 - 模块构建失败

dan*_*iel 10 javascript loader webpack vue.js vue-loader

我正在尝试将 vue-loader 与我的 SPA VUE 应用程序一起使用，但出现以下错误。

ERROR in ./app2.vue
Module build failed (from ./node_modules/vue-loader/dist/index.js):
TypeError: Cannot read properties of undefined (reading 'styles')
    at Object.loader (/Users/daniel.bachnov/docker/qhs3-admin/frontend/node_modules/vue-loader/dist/index.js:70:34)
 @ ./main.js 1:0-29 14:8-11

webpack 5.74.0 compiled with 1 error and 3 warnings in 3312 ms

Run Code Online (Sandbox Code Playgroud)

为了消除应用程序代码噪音，我创建了非常简单的组件app2.vue：并尝试将其连接到我的main.js入口点文件。

<script>
export default {
  data() {
    return {
      count: 0
    }
  }
}
</script>

<template>
  <button @click="count++">You clicked me {{ count }} times.</button>
</template>

Run Code Online (Sandbox Code Playgroud)

main.js

import App from './app2.vue';
import Router from './router/router.js';
import Store from './store/index.js';

Vue.use(Vuetify)
Vue.use(VueRouter);

const app = new Vue({
    router: Router.router,
    store: Store,
    el: '#app',
    vuetify: new Vuetify(),
    components: {
        App,
    }
});

Run Code Online (Sandbox Code Playgroud)

webpack.config.js：

const path = require('path');
const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
    mode: 'production',
    entry: './main.js',
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, './../src/public/dist/'),
        publicPath: "/dist/"
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            }
        ]
    },
    plugins: [
        // make sure to include the plugin!
        new VueLoaderPlugin()
    ]
};

Run Code Online (Sandbox Code Playgroud)

包.json

{
  "name": "app",
  "version": "1.0.0",
  "description": "app",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "watch": "webpack --watch",
    "build": "webpack"
  },
  "author": "daniel bach",
  "license": "ISC",
  "dependencies": {
    "@mdi/js": "^5.9.55",
    "@vue/composition-api": "1.0.4",
    "@vuetify/cli-plugin-utils": "^0.0.9",
    "apexcharts": "^3.27.3",
    "core-js": "^3.6.5",
    "vue": "^2.6.11",
    "vue-apexcharts": "^1.6.2",
    "vue-router": "^3.2.0",
    "vuetify": "^2.4.0",
    "vuex": "^3.4.0",
    "vue-loader": "^17.0.0"
  },
  "devDependencies": {
    "vue-loader": "^17.0.0",
    "vue-template-compiler": "^2.7.13",
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0"
  },
  "keywords": []
}

Run Code Online (Sandbox Code Playgroud)

您知道为什么我不断收到此错误吗？