vue.js - Nuxtjs : Vue packages version mismatch: vue@3. 2.22 和 vue-server-renderer@2.6.14

Question

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

Vue packages version mismatch:

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

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

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

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

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

来自终端的完整错误:

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+是一个Vue3 UI库，所以它确实不兼容Nuxt2(使用Vue2)。因此，您收到错误的原因是:它与 Vue2 不兼容。

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

顺便说一句，你需要正好使用这个吗？归结为 CSS frameworks 时有很多选择同时兼容 Vue2 和 Vue3。并非所有人都是，但大多数都是。