Nuxtjs：Vue 包版本不匹配：vue@3.2.22 和 vue-server-renderer@2.6.14

Question

我正在根据提到的代码 here 使用 Vuejs/Nuxtjs 开发一个 Drawflow 应用程序。当我安装包 element-plus 并启动应用程序时，出现错误：

Vue packages version mismatch:

- vue@3.2.22
- vue-server-renderer@2.6.14

如果我删除那个包，那么一切正常。

我尝试根据各种答案中提到的评论进行以下操作：

删除 node_modules 和 package-lock.json 并使用 npm install 重新安装。
运行 npm audit fix --force
运行 npm update

但对我来说没有任何效果。有人可以让我知道我需要做什么才能避免出现此错误并使一切正常工作吗？

来自 terminal 的完整错误：

Vue packages version mismatch:

- vue@3.2.22
- vue-server-renderer@2.6.14

This may cause things to work incorrectly. Make sure to use the same version for both.


  
  Vue packages version mismatch:
  
  - vue@3.2.22
  - vue-server-renderer@2.6.14
  
  This may cause things to work incorrectly. Make sure to use the same version for both.
  
  at Object.<anonymous> (node_modules/vue-server-renderer/index.js:8:9)
  at Module.o._compile (node_modules/jiti/dist/v8cache.js:2:2778)
  at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
  at Module.load (internal/modules/cjs/loader.js:928:32)
  at Function.Module._load (internal/modules/cjs/loader.js:769:14)
  at Module.require (internal/modules/cjs/loader.js:952:19)
  at n (node_modules/jiti/dist/v8cache.js:2:2472)
  at Object.<anonymous> (node_modules/@nuxt/vue-renderer/dist/vue-renderer.js:19:27)
  at Module.o._compile (node_modules/jiti/dist/v8cache.js:2:2778)
  at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)


   ╭────────────────────────────────────────────────────────────────────────────────────────────╮
   │                                                                                            │
   │   ✖ Nuxt Fatal Error                                                                       │
   │                                                                                            │
   │   Error:                                                                                   │
   │                                                                                            │
   │   Vue packages version mismatch:                                                           │
   │                                                                                            │
   │   - vue@3.2.22                                                                             │
   │   - vue-server-renderer@2.6.14                                                             │
   │                                                                                            │
   │   This may cause things to work incorrectly. Make sure to use the same version for both.

以下是我的完整 package.json 文件：

{
  "name": "my-project",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint:js": "eslint --ext \".js,.vue\" --ignore-path .gitignore .",
    "lint": "npm run lint:js"
  },
  "dependencies": {
    "@element-plus/icons": "^0.0.11",
    "@nuxtjs/axios": "^5.13.6",
    "@nuxtjs/dotenv": "^1.4.1",
    "bootstrap": "^4.6.0",
    "bootstrap-vue": "^2.21.2",
    "core-js": "^3.15.1",
    "drawflow": "^0.0.52",
    "element-plus": "^1.2.0-beta.3",
    "nuxt": "^2.15.8",
    "url-loader": "^4.1.1",
    "vue-multiselect": "^2.1.6"
  },
  "devDependencies": {
    "@babel/eslint-parser": "^7.14.7",
    "@nuxtjs/eslint-config": "^6.0.1",
    "@nuxtjs/eslint-module": "^3.0.2",
    "@types/drawflow": "^0.0.3",
    "eslint": "^7.29.0",
    "eslint-plugin-nuxt": "^2.0.0",
    "eslint-plugin-vue": "^7.12.1"
  }
}

Answer 1

Element+是一个Vue3UI库，所以它确实不兼容Nuxt2（使用Vue2）。因此，为什么会出现错误：它与 Vue2 不兼容。

与此同时，Element 与 Vue2 完全兼容，可能非常适合。

顺便说一句，您需要正好使用这个吗？当涉及 CSS frameworks 与 Vue2 和 Vue3 兼容时，有很多选择。并非所有人都是，但大多数都是。

Nuxtjs：Vue 包版本不匹配：vue@3.2.22 和 vue-server-renderer@2.6.14

Nuxtjs: Vue packages version mismatch: vue@3.2.22 and vue-server-renderer@2.6.14

npm

vue.js

vuejs2

nuxt.js

element-plus