2023 年 8 月：错误：@vitejs/plugin-vue 需要 vue (>=3.2.13) 或 @vue/compiler-sfc 存在于依赖关系树中

Question

背景

我正在将一个项目从 Vue 2 迁移到 Vue 3。我修复了所有重大更改和语法，该应用程序可以正常工作。在删除 vue compat 模式之前，我必须再做一步：用类似的 Vue-3 插件替换仅 Vue-2 的插件。在此过程中，我升级了一些软件包，现在无法再运行该应用程序。

错误

运行

npm run serve

会导致此控制台错误：

ERROR  Error: @vitejs/plugin-vue requires vue (>=3.2.13) or @vue/compiler-sfc to be present in the dependency tree.
Error: @vitejs/plugin-vue requires vue (>=3.2.13) or @vue/compiler-sfc to be present in the dependency tree.

我仍然使用Vue-CLI，从未安装Vite。在

package.json

中，

vue

升级到最新版本3.3.4。我不明白为什么vitejs和vue >= 3.2.13会出现错误。以下是完整的错误消息：

ERROR  Error: @vitejs/plugin-vue requires vue (>=3.2.13) or @vue/compiler-sfc to be present in the dependency tree.
Error: @vitejs/plugin-vue requires vue (>=3.2.13) or @vue/compiler-sfc to be present in the dependency tree.
    at Object.<anonymous> (-----HIDE FULL PATH DUE TO WORK RELATED FILES---\MigratingToVue3\client\node_modules\vue-loader\dist\compiler.js:14:15)
    at Module._compile (internal/modules/cjs/loader.js:1015:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1035:10)
    at Module.load (internal/modules/cjs/loader.js:879:32)
    at Function.Module._load (internal/modules/cjs/loader.js:724:14)
    at Module.require (internal/modules/cjs/loader.js:903:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.<anonymous> (-----HIDE FULL PATH DUE TO WORK RELATED FILES---\MigratingToVue3\client\node_modules\vue-loader\dist\index.js:29:20)
    at Module._compile (internal/modules/cjs/loader.js:1015:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1035:10)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] serve: `vue-cli-service serve`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] serve script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

环境

我在这个项目中使用

Node v12.19.0

，

npm v6.14.8

，没有改变。

这是我的

package.json

文件：

{
  "name": "client",
  "version": "1.1.134",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "prebuild": "npm version patch",
    "build": "vue-cli-service build",
    "serve-dev": "vue-cli-service serve --mode dev",
    "serve-prod": "vue-cli-service serve --mode prod",
    "build-dev": "vue-cli-service build --mode dev",
    "build-prod": "vue-cli-service build --mode prod",
    "postbuild": "node configure.js",
    "lint": "vue-cli-service lint",
    "build:nobump": "vue-cli-service build",
    "deploy-dev": "cli-confirm \"Do you really want to deploy the application on DEV?\" && npm run build-dev && msdeploy --verb sync --source contentPath=dist --dest contentPath=---HIDE PATH DUE TO WORK---,ComputerName=---HIDE PATH DUE TO WORK---",
    "deploy-prod": "cli-confirm \"Do you really want to deploy the application on PRODUCTION?\" && npm run build-prod && msdeploy --verb sync --source contentPath=dist --dest contentPath=---HIDE PATH DUE TO WORK---,ComputerName=---HIDE PATH DUE TO WORK---"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.36",
    "@fortawesome/free-solid-svg-icons": "^5.15.4",
    "@fortawesome/vue-fontawesome": "^3.0.3",
    "@vue/compat": "^3.3.4", <------ BEFORE UPGRADE: "^3.1.0" ------>
    "axios": "^0.22.0",
    "cli-confirm": "^1.0.1",
    "core-js": "^3.32.0",
    "d3": "^5.15.1",
    "dexie": "^3.2.4",
    "msdeploy": "^1.2.1",
    "npm": "^7.24.2",
    "sass": "^1.64.2",
    "vue": "^3.3.4", <------ BEFORE UPGRADE: "^3.1.0" ------>
    "vue-next": "0.0.1",
    "vue-router": "^4.0.0",
    "vue-swal": "^1.0.0",
    "vue2-editor": "^2.10.2",
    "vuex": "^4.0.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~5.0.8",
    "@vue/cli-plugin-eslint": "~5.0.8",
    "@vue/cli-plugin-router": "~5.0.8",
    "@vue/cli-plugin-vuex": "~5.0.8",
    "@vue/cli-service": "~5.0.8",
    "@vue/eslint-config-standard": "^5.1.2",
    "babel-eslint": "^10.1.0",
    "eslint": "^7.5.0",
    "eslint-plugin-import": "^2.28.0",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-standard": "^4.0.0",
    "eslint-plugin-vue": "^6.2.2",
    "sass-loader": "^10.1.0",
    "@vue/compiler-sfc": "^3.3.4"
  }
}

我尝试过的

没有成功：

• 升级前复制粘贴

  package.json

  文件和

  package-lock.json

  的内容，运行

  npm run serve

• 删除

  node-modules

  文件夹和

  package-lock.json

  ，清除缓存

  npm cache clean --force

  并运行

  npm install

• 重新启动计算机、关闭和打开计算机

有人问了

一个类似的问题，但没有一个答案对我有用。

我的目标只是让应用程序像所有升级之前一样再次运行。任何投入将不胜感激。非常感谢！

Answer 1

我找到了答案。我需要将 Vue 升级到特定版本 3.2.26。 这里回答了这个问题。

npm i [email protected]

我之前尝试过这个解决方案，但第一次没有成功。为什么，我不知道。希望这对您有帮助！