Vue packages version mismatch

问题

之前修改前端项目时，遇到一个问题，整理记录一下。

Vue packages version mismatch:
- vue@2.6.12 
- vue-template-compiler@2.7.16 
This may cause things to work incorrectly. Make sure to use the same version for both.
If you are using vue-loader@>=10.0, simply update vue-template-compiler.
If you are using vue-loader@<10.0 or vueify, re-installing vue-loader/vueify should bump vue-template-compiler to the latest.

前端项目的package.json如下：

{
  "dependencies": {
    "@antv/x6": "^2.15.3",
    "@antv/x6-plugin-dnd": "^2.1.1",
    "@antv/x6-plugin-keyboard": "^2.2.1",
    "@antv/x6-plugin-snapline": "^2.1.7",
    "@riophae/vue-treeselect": "0.4.0",
    "axios": "0.24.0",
    "clipboard": "2.0.8",
    "core-js": "3.25.3",
    "echarts": "^5.4.0",
    "element-ui": "2.15.14",
    "file-saver": "2.0.5",
    "fuse.js": "6.4.3",
    "github-markdown-css": "^5.5.0",
    "highlight.js": "9.18.5",
    "js-beautify": "1.13.0",
    "js-cookie": "3.0.1",
    "jsencrypt": "3.0.0-rc.1",
    "mavon-editor": "^2.6.17",
    "monaco-editor": "^0.29.1",
    "monaco-editor-webpack-plugin": "^5.0.0",
    "nprogress": "0.2.0",
    "prismjs": "^1.29.0",
    "qs": "^6.7.0",
    "quill": "1.3.7",
    "screenfull": "5.0.2",
    "sortablejs": "1.10.2",
    "sql-formatter": "^4.0.2",
    "vue": "^2.6.12",
    "vue-count-to": "1.0.13",
    "vue-cron": "^1.0.9",
    "vue-cropper": "0.5.5",
    "vue-cropperjs": "^3.0.0",
    "vue-markdown": "^2.2.4",
    "vue-meta": "2.4.0",
    "vue-router": "3.4.9",
    "vue2-ace-editor": "^0.0.15",
    "vuedraggable": "2.24.3",
    "vuex": "3.6.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "4.4.6",
    "@vue/cli-plugin-eslint": "4.4.6",
    "@vue/cli-service": "4.4.6",
    "babel-eslint": "10.1.0",
    "babel-plugin-dynamic-import-node": "2.3.3",
    "chalk": "4.1.0",
    "compression-webpack-plugin": "5.0.2",
    "connect": "3.6.6",
    "eslint": "7.15.0",
    "eslint-plugin-vue": "7.2.0",
    "lint-staged": "10.5.3",
    "runjs": "4.4.2",
    "sass": "1.32.13",
    "sass-loader": "10.1.1",
    "script-ext-html-webpack-plugin": "2.1.5",
    "svg-sprite-loader": "5.1.1",
    "vue-template-compiler": "^2.6.12"
  }
}

解决方案

这个问题是由于 vue 和 vue-template-compiler 版本不匹配引起的。Vue 的核心库和 vue-template-compiler 必须使用相同的版本，否则在编译和运行时可能会出现问题。

要解决这个问题，可以通过以下步骤确保两者的版本匹配：

1. 修改 package.json：将 "vue": "^2.6.12" 改为 "vue": "2.6.12"、
2. 删除文件夹 node_modules
3. 删除 package-lock.json
4. 运行 npm install

补充说明

在 package.json 中，^ 符号用于指定依赖包的版本范围，它告诉 npm 或 yarn 在安装依赖时选择一个符合指定范围的版本。

具体来说，^ 符号会让 npm 安装指定的主版本号及其之后的次版本号和修订号，只要它们不包含破坏性更改（即主版本号不变）。这意味着你可以获得最新的补丁更新和次版本更新，而不升级到一个可能包含破坏性更改的主版本。

例如：

{
  "dependencies":{
    "vue":"^2.6.12"
  }
}

在这个例子中，^2.6.12 的含义是：

• 最低安装版本是 2.6.12
• 最大允许安装版本是< 3.0.0

也就是说，只要 vue 的版本号是 2.x.x，其中的 x 是次版本或补丁版本，npm 就会选择最新的版本来安装，但它不会安装主版本号 3.x.x 或更高版本。

参考

vue.js - How do I fix a "Vue packages version mismatch" error on Laravel Spark v4.0.9? - Stack Overflow