为Shopware 6 Storefront添加*.vue支持（无法解析vue-loader错误）

已完成的基础配置 #

• 配置MyPluginTheme\src\Resources\app\storefront\build\webpack.config.js，添加vue-loader规则与VueLoaderPlugin，并配置Vue相关依赖的别名；
• 在main.js中编写基础Vue应用代码，挂载到Twig文件的#app元素，应用可正常运行。

遇到的问题 #

将代码迁移到*.vue文件，在main.js中引入HelloWorld.vue时，构建报错：

Module not found: Error: Can't resolve 'vue-loader'

仅在webpack配置的resolve字段中添加vue-loader别名无法解决该问题。

解决方案 #

需在webpack配置的resolveLoader字段中配置vue-loader别名，而非仅在resolve中配置。以下是可正常运行的最终webpack.config.js代码：

const { join, resolve } = require('path');
const { VueLoaderPlugin } = require("vue-loader");

module.exports = () => {
    return {
        module: {
            rules: [
                {
                    test: /\.vue$/,
                    use: ['vue-loader'],
                },
                {
                    // 解决pinia相关的mjs文件解析问题
                    test: /\.mjs$/,
                    include: /node_modules/,
                    type: "javascript/auto"
                }
            ],
        },
        plugins: [
            new VueLoaderPlugin()
        ],
        resolveLoader: {
            alias: {
                'vue-loader': resolve(join(__dirname, '..', 'node_modules', 'vue-loader')),
            },
        },
        resolve: {
            alias: {
                "@vue/compiler-dom": resolve(join(__dirname, '..', 'node_modules', '@vue/compiler-dom')),
                "@vue/compiler-core": resolve(join(__dirname, '..', 'node_modules', '@vue/compiler-core')),
                "@vue/runtime-dom": resolve(join(__dirname, '..', 'node_modules', '@vue/runtime-dom')),
                "@vue/runtime-core": resolve(join(__dirname, '..', 'node_modules', '@vue/runtime-core')),
                "@vue/shared": resolve(join(__dirname, '..', 'node_modules', '@vue/shared')),
                "@vue/reactivity": resolve(join(__dirname, '..', 'node_modules', '@vue/reactivity')),
                '@vue/devtools-api': resolve(join(__dirname, '..', 'node_modules', '@vue/devtools-api')),
                'vue-demi': resolve(join(__dirname, '..', 'node_modules', 'vue-demi')),
                'pinia': resolve(join(__dirname, '..', 'node_modules', 'pinia')),
                'vue': resolve(join(__dirname, '..', 'node_modules', 'vue/dist/vue.esm-bundler.js')),
            }
        }
    }
}

内容的提问来源于stack exchange，提问作者Robert Rypuła