错误：vue-loader 要求 @vue/compiler-sfc 存在于依赖树中答案

【问题标题】：Error : vue-loader requires @vue/compiler-sfc to be present in the dependency tree错误：vue-loader 要求 @vue/compiler-sfc 存在于依赖树中
【发布时间】：2021-01-14 22:15:41
【问题描述】：

我在尝试时遇到此错误

npm run serve

我试过npm updatesudo npm serve。它没有用。我还尝试删除 package-lock.json 文件并在此之后执行npm install，但这也不起作用。我还将 vue-loader 的版本降级到 15.9.2 也没有工作

【问题讨论】：

你试过npm i @vue/compiler-sfc吗？
看起来您正在尝试在 Vue 2 项目中使用来自 Vue 3 的 vue-loader。这是我为 Vue 2 项目准备的一个版本——vue: 2.6.14, vue-loader: 15.9.7, vue-template-compiler: 2.6.14, webpack: 5.42.0, webpack-cli: 4.7.2, webpack-dev-server: 3.11.2, @babel/core: 7.14.6, @babel/preset-env: 7.14.7, babel-loader: 8.2.2。
查看本教程以了解没有 vue-cli 的 Vue v3 设置：frontendguruji.com/blog/…

标签： vue.js npm npm-install

【解决方案1】：

很可能，您的问题已在先前的答案之一中得到解决。但是还有另一个最不可能选项，您会收到类似的错误。

问题出在... node / npm 版本中。可能，某些（非 LTS？）node/npm 版本会生成不完全正确的依赖树，然后尝试构建不必要的源。

当 Jenkins 在 node v11.14.0 和 npm 6.7.0 上构建它时，我们在其中一个项目中遇到了这个错误。但是在node v8.16.0/npm 6.4.1、node v10.18.0/npm 6.13.4 和node v14.16.0/npm 7.8.0 上可以构建相同的源。我们不得不更新 node 和 npm 来解决这个问题。

请将此答案仅用作“最后机会”。当您看到此错误时，无需立即更新/回滚您的节点/npm 环境。

【讨论】：

【解决方案2】：

对于我们来说，使用 VueJs 2 的人！

记住 vue-loader@16 仅适用于 VueJs 3。

查看发布日志 here.

我降级到v15.9.7。它工作正常。

如果您使用的是 Dependabot，可以添加忽略规则以避免 v16 PR：

ignore:
  - dependency-name: "vue-loader"
    versions: ["16.x"]

【讨论】：

【解决方案3】：

这是vue-loader@16 中的新事物。要解决此问题，假设您使用的是 Vue 2，您应该降级：

yarn add vue-loader@15

注意，你还需要vue-template-compiler，与你使用的Vue版本相同。

【讨论】：

【解决方案4】：

你可以这样做，这对我有用

vue-loader@15.9.7
vue-template-compiler@2.6.1

【讨论】：

【解决方案5】：

直接安装时出现错误。但是当我强迫它时它起作用了。;

npm i @vue/compiler-sfc --force

【讨论】：

【解决方案6】：

对于那些使用 Vue 3 和 Yarn Berry 遇到此问题的人，请记住 Vue 3 插件仍然与 Yarn 2.* 不兼容，因此您必须更新 .yarnrc.yml 中的 vue-loader 部分，如下所示：

  vue-loader@*:
    peerDependencies:
      '@vue/compiler-sfc': '*'
      webpack: '*'

【讨论】：

【解决方案7】：

实际上，您缺少该库，因此您只需要安装它即可

npm i @vue/compiler-sfc

【讨论】：

我的问题是vue-loader 文档中没有提到这是必要的。该错误很容易被忽略，尤其是因为webpack 的输出往往非常冗长，因为所有依赖包都包含在内。
npm i @vue/compiler-sfc --save-dev