Vue packages version mismatch，vue&vue-template-compiler版本冲突导致的编译异常解决

Posted 2023-04-01 ITZHIHONH

wzh@wzhdeMacBook-Pro cc-doc % vuepress build
wait Extracting site metadata...
tip Apply theme @vuepress/theme-default ...
tip Apply plugin container (i.e. "vuepress-plugin-container") ...
tip Apply plugin @vuepress/register-components (i.e. "@vuepress/plugin-register-components") ...
tip Apply plugin @vuepress/active-header-links (i.e. "@vuepress/plugin-active-header-links") ...
tip Apply plugin @vuepress/search (i.e. "@vuepress/plugin-search") ...
tip Apply plugin @vuepress/nprogress (i.e. "@vuepress/plugin-nprogress") ...
Error: 

Vue packages version mismatch:

- vue@3.2.47 (/Users/wzh/work/vscode/cc-doc/node_modules/vue/index.js)
- vue-template-compiler@2.7.14 (/Users/wzh/work/vscode/cc-doc/node_modules/vue-template-compiler/package.json)

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.

    at Object.<anonymous> (/Users/wzh/work/vscode/cc-doc/node_modules/vue-template-compiler/index.js:10:9)
    at Module._compile (node:internal/modules/cjs/loader:1119:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1173:10)
    at Module.load (node:internal/modules/cjs/loader:997:32)
    at Module._load (node:internal/modules/cjs/loader:838:12)
    at Module.require (node:internal/modules/cjs/loader:1021:19)
    at require (node:internal/modules/cjs/helpers:103:18)
    at loadFromContext (/usr/local/lib/node_modules/vuepress/node_modules/vue-loader/lib/compiler.js:30:10)
    at loadTemplateCompiler (/usr/local/lib/node_modules/vuepress/node_modules/vue-loader/lib/compiler.js:37:12)
    at exports.resolveCompiler (/usr/local/lib/node_modules/vuepress/node_modules/vue-loader/lib/compiler.js:25:23)
    at VueLoaderPlugin.apply (/usr/local/lib/node_modules/vuepress/node_modules/vue-loader/lib/plugin-webpack4.js:91:22)
    at webpack (/usr/local/lib/node_modules/vuepress/node_modules/webpack/lib/webpack.js:51:13)
    at /usr/local/lib/node_modules/vuepress/node_modules/webpack/lib/webpack.js:36:39
    at Array.map (<anonymous>)
    at webpack (/usr/local/lib/node_modules/vuepress/node_modules/webpack/lib/webpack.js:36:24)
    at /usr/local/lib/node_modules/vuepress/node_modules/@vuepress/core/lib/node/build/index.js:182:5
    at new Promise (<anonymous>)
    at compile (/usr/local/lib/node_modules/vuepress/node_modules/@vuepress/core/lib/node/build/index.js:181:10)
    at Build.render (/usr/local/lib/node_modules/vuepress/node_modules/@vuepress/core/lib/node/build/index.js:55:25)
    at App.build (/usr/local/lib/node_modules/vuepress/node_modules/@vuepress/core/lib/node/App.js:499:29)

解决过程：

查看vue的相关安装环境：
wzh@wzhdeMacBook-Pro cc-doc % npm list vue
cc-doc@ /Users/wzh/work/vscode/cc-doc
├─┬ @vue/cli@5.0.8
│ └── vue@2.7.14
├─┬ vue@3.2.47
│ └─┬ @vue/server-renderer@3.2.47
│   └── vue@3.2.47 deduped
└─┬ vuepress@1.9.9
  └─┬ @vuepress/core@1.9.9
    ├─┬ @vue/babel-preset-app@4.5.19
    │ ├─┬ @vue/babel-preset-jsx@1.4.0
    │ │ └── vue@3.2.47 deduped
    │ └── vue@3.2.47 deduped
    └── vue@2.7.14

不用修改代码里面的版本配置，直接按需要的版本，安装vue对应版本；
wzh@wzhdeMacBook-Pro cc-doc % npm install vue@2.7.14

removed 14 packages, changed 4 packages, and audited 1860 packages in 20s

143 packages are looking for funding
  run `npm fund` for details

43 vulnerabilities (1 low, 10 moderate, 29 high, 3 critical)

To address issues that do not require attention, run:
  npm audit fix

To address all issues possible (including breaking changes), run:
  npm audit fix --force

Some issues need review, and may require choosing
a different dependency.

Run `npm audit` for details.

安装完成后，正常编译：
wzh@wzhdeMacBook-Pro cc-doc % vuepress build
wait Extracting site metadata...
tip Apply theme @vuepress/theme-default ...
tip Apply plugin container (i.e. "vuepress-plugin-container") ...
tip Apply plugin @vuepress/register-components (i.e. "@vuepress/plugin-register-components") ...
tip Apply plugin @vuepress/active-header-links (i.e. "@vuepress/plugin-active-header-links") ...
tip Apply plugin @vuepress/search (i.e. "@vuepress/plugin-search") ...
tip Apply plugin @vuepress/nprogress (i.e. "@vuepress/plugin-nprogress") ...

● Client █████████████████████████ building (22%) 105/146 modules 41 active

● Client █████████████████████████ building (22%) 105/146 modules 41 active
 ...ue-loader › ../../../../../usr/local/lib/node_modules/vuepress/node_modules/@vuepress/core/lib/client/components/GlobalLayout.vue

● Server █████████████████████████ building (22%) 108/149 modules 41 activ

 

Vue packages version mismatch版本问题的解决

今天下载了一个vue项目，npm run dev 时发现报错，错误信息入下：

error in .src/components/mobile/SeniorDetail.vue

Module build failed: Error:

Vue packages version mismatch:

• [email protected]
• [email protected]

根据提示，是版本不匹配的问题，将vue的版本改成和vue-template-compiler的版本一致即可，
使用如下命令安装指定版本并保存版本信息到package.json文件
npm install [email protected] --save