javascript - Webpack 'vue-loader' 编译问题与 '@vue/compiler-sfc'

Question

问题
我们正在构建一个新应用程序，并选择使用 GULP 和 Webpack 管道来编译 SCSS、Vue 3 和 Typescript 文件。不幸的是，我花了最后一天寻找递归问题的答案，我解决了一个问题，然后它恢复到前一个问题，解决了这个问题，它恢复到我已经解决的问题，依此类推。
作为拉入 vue-loader 的一部分抛出一个初始错误，说明 vue-template-compiler是必需的依赖项。下载缺少的依赖项可以解决问题，但现在会抛出一个新错误，说明版本与 Vue 不匹配，因为它们都需要在同一版本上。
环顾四周后我知道vue-template-compiler已替换为 @vue/compiler-sfc在 v3 中，自然我已经卸载了前者并安装了后者。然而，它让我回到了第一个方格，上面写着vue-template-compiler。需要安装或通过选项指定兼容的编译器。
我在 webpack.config 中查看了有关指定编译器的各种问题和答案。但不断地回到我看过的东西上。
尝试的解决方案
Vue 3 Problem with Vue Template
Webpack for Vue 3
Vue 3 Supporting Typescript
错误一

ERROR in ./Content/Vue/Login.vue
Module Error (from ./node_modules/vue-loader/lib/index.js):
Vue packages version mismatch:
- vue@3.0.11 (<Project Path>\node_modules\vue\index.js)
- vue-template-compiler@2.6.12 (<Project Path>\node_modules\vue-template-compiler\package.json)
This may cause things to work incorrectly. Make sure to use the same version for both.
If you are using vue-loader@>=10.0, simply update vue-template-compiler.
If you are using vue-loader@<10.0 or vueify, re-installing vue-loader/vueify should bump vue-template-compiler to the latest.

错误二

ERROR in ./Content/Vue/Login.vue
Module Error (from ./node_modules/vue-loader/lib/index.js):
[vue-loader] vue-template-compiler must be installed as a peer dependency, or a compatible compiler implementation must be passed via options.
Error: [vue-loader] vue-template-compiler must be installed as a peer dependency, or a compatible compiler implementation must be passed via options.
    at loadTemplateCompiler (<Project Path>\node_modules\vue-loader\lib\index.js:24:31)
    at Object.module.exports (<Project Path>\node_modules\vue-loader\lib\index.js:69:35)
ERROR in ./Content/Vue/Login.vue
Module build failed (from ./node_modules/vue-loader/lib/index.js):
TypeError: Cannot read property 'parseComponent' of undefined
    at parse (<Project Path>\node_modules\@vue\component-compiler-utils\dist\parse.js:15:23)
    at Object.module.exports (<Project Path>\node_modules\vue-loader\lib\index.js:67:22)
webpack 5.36.2 compiled with 2 errors in 153 ms

Webpack 配置

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

module.exports = {
    entry: {
        login: "./Content/Vue/Login.vue"
    },
    output: {
        filename: "[name].js",
        path: path.resolve(__dirname, "../../wwwroot/Distribution/Scripts")
    },
    mode: "development", 
    plugins: [
        new VueLoaderPlugin()
    ],
    resolve: {
        alias: {
            vue: "@vue/runtime-dom"
        }
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                loader: "ts-loader",
                options: {
                    appendTsSuffixTo: [/\.vue$/],
                },
                exclude: /node_modules/
            },
            {
                test: /\.vue$/,
                loader: "vue-loader"
            }
        ]
    }
}

包 JSON 配置

{
  "name": "***",
  "version": "1.0.0",
  "description": "***",
  "main": "index.js",
  "license": "UNLICENSED",
  "repository": "***",
  "scripts": {
    "webpack": "webpack --config=Scripts/Webpack/webpack.config.js"
  },
  "devDependencies": {
    "@vue/compiler-sfc": "^3.0.11",
    "css-loader": "^5.2.4",
    "file-loader": "^6.2.0",
    "gulp": "^4.0.2",
    "gulp-clean": "^0.4.0",
    "gulp-clean-css": "^4.3.0",
    "gulp-concat": "^2.6.1",
    "gulp-rename": "^2.0.0",
    "gulp-run": "^1.7.1",
    "gulp-sass": "^4.1.0",
    "gulp-sourcemaps": "^2.6.5",
    "mini-css-extract-plugin": "^1.6.0",
    "ts-loader": "^9.1.1",
    "typescript": "^4.2.4",
    "url-loader": "^4.1.1",
    "vue-loader": "^15.9.6",
    "webpack": "^5.35.0",
    "webpack-cli": "^4.6.0"
  },
  "dependencies": {
    "vue": "^3.0.11",
    "vue-router": "^4.0.6"
  }
}

Answer 1

就在我即将发布这个问题时，我发现了问题所在。本质上是 vue-loader版本不正确并回答此问题，因此其他开发人员不会花费数小时寻找答案。
在为应用程序构建前端结构的早期，我遇到了一个问题，即 NPM 中 Vue 的最新版本是 v2.6.12，下一个版本是 v3.0.11。很简单，只需指定版本即可解决。
原来这与 vue-loader 相同的问题在撰写本文时，最新版本是 v15.9.6，而下一个版本是 v16.2.0。正如您会从包含的 package.json 中注意到的那样文件，指定的版本是 v15.9.6。
让 Vue 3 与 vue-loader 一起工作安装的版本必须不低于“16.2.0”。
编辑:2022 年 2 月 16 日
通过 NPM 默认下载 Vue 现在下拉 v3。依赖包(例如 vue-loader、@vue/compiler-sfc 等)已被修改，因此下拉的最新版本适用于 Vue v3 而不是 v2。从理论上讲，这将意味着问题中的问题将消失。