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

Posted 2023-02-16

【中文标题】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

【发布时间】：2021-12-31 07:51:35

【问题描述】：

我正在基于提到的代码here 使用Vuejs/Nuxtjs 开发Drawflow 应用程序。当我安装包element-plus 并启动应用程序时，我得到了错误：

Vue packages version mismatch:

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

如果我删除该软件包，那么一切正常。

我根据各种答案中提到的 cmets 尝试了以下操作：

删除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"
  

【问题讨论】：

这些错误可能意味着您尝试安装的 NPM 包所需的包与 Nuxt 使用的版本不兼容。 Vue3 可能有only 可用的东西？ （例如，我正在考虑像 HeadlessUI 之类的东西）到目前为止，这不是包管理器问题，而是您正在使用的包版本之间的兼容性问题。

@kissu 非常感谢您的回复。是的，这绝对是软件包版本的问题。有没有办法解决这个问题？因为我真的被困在了这一点上。期待您的建议。

你之前有一个工作项目，对吧？尝试制作差异或阅读堆栈跟踪给您的内容。在某些时候可能会提到不匹配的包。

如果我只是安装包npm install element-plus --save 并使用npm run dev 启动项目，那么我会收到问题中提到的错误。甚至没有使用它，我得到了错误。如果我删除这个包，那么一切正常。我已在终端中添加了完整的 error 响应。

【参考方案1】：

Element+是一个Vue3 UI库，所以确实不兼容Nuxt2（使用Vue2）。因此，您收到错误的原因是：它与 Vue2 不兼容。

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

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