问题

我们正在构建一个新应用程序，并选择使用 GULP 和 Webpack 管道来编译 SCSS、Vue 3 和 Typescript 文件。不幸的是，我花了最后一天寻找递归问题的答案，我解决了一个问题，它又回到了前一个问题，修复了这个问题，它又回到了我已经解决的问题，依此类推。

作为引入vue-loader初始错误的一部分，抛出说明vue-template-compiler是必需的依赖项。下载缺少的依赖项修复了这个问题，但现在抛出一个新错误，指出版本与 Vue 不匹配，因为它们都需要在同一版本上。

环顾四周后，我知道在 v3 中vue-template-compiler被替换了@vue/compiler-sfc，所以我很自然地卸载了前者并安装了后者。然而，它让我回到了它声明vue-template-compiler需要安装或通过选项指定兼容编译器的地方。

我查看了有关指定编译器的各种问题和答案，webpack.config但不断地回到我看过的东西。

尝试的解决方案

用于 Vue 3
Vue 3 支持打字稿的Vue 模板Webpack 的Vue 3 问题

错误一

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_modulesvueindex.js)
- vue-template-compiler@2.6.12 (<Project Path>node_modulesvue-template-compilerpackage.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/L
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_modulesvue-loaderlibindex.js:24:31)
    at Object.module.exports (<Project Path>node_modulesvue-loaderlibindex.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@vuecomponent-compiler-utilsdistparse.js:15:23)
    at Object.module.exports (<Project Path>node_modulesvue-loaderlibindex.js:67:22)
webpack 5.36.2 compiled with 2 errors in 153 ms

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_modulesvue-loaderlibindex.js:24:31)
    at Object.module.exports (<Project Path>node_modulesvue-loaderlibindex.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@vuecomponent-compiler-utilsdistparse.js:15:23)
    at Object.module.exports (<Project Path>node_modulesvue-loaderlibindex.js:67:22)
webpack 5.36.2 compiled with 2 errors in 153 ms

错误二
网络包配置
包 JSON 配置

回答

就在我正要发布这个问题时，我发现了问题所在。本质上，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”。