Vue.js项目依赖冲突：vue-tel-input与vue@2.6.14兼容问题求助

问题描述 #

在Vue.js项目中安装vue-tel-input时遭遇依赖冲突，项目使用Vue@2.6.14，执行npm install时出现如下错误：

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: undefined@undefined
npm ERR! Found: vue@2.6.14
npm ERR! node_modules/vue
npm ERR! vue@"^2.6.14" from the root project
npm ERR! peer vue@"~2" from @fortawesome/vue-fontawesome@2.0.10
npm ERR! node_modules/@fortawesome/vue-fontawesome
npm ERR! @fortawesome/vue-fontawesome@"^2.0.10" from the root project
npm ERR! 8 more (@vue/composition-api, vform, vue-echarts, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! vue-tel-input@"^5.6.2" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: vue@2.7.16
npm ERR! node_modules/vue
npm ERR! peer vue@"^2.7.10" from vue-tel-input@5.15.0
npm ERR! node_modules/vue-tel-input
npm ERR! vue-tel-input@"^5.6.2" from the root project

已尝试npm install --legacy-peer-deps和npm install --force，但问题未解决，需求是找到与Vue@2.6.14兼容的vue-tel-input版本，或不升级Vue到2.7.x的解决方法。

项目的package.json配置如下：

{
  "private": true,
  "scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "npm run development -- --watch",
    "watch-poll": "npm run watch -- --watch-poll",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "lint": "eslint --fix --ext .js,.vue resources/js"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.3.0",
    "@fortawesome/free-brands-svg-icons": "^5.15.4",
    "@fortawesome/free-regular-svg-icons": "^5.15.4",
    "@fortawesome/free-solid-svg-icons": "^5.15.4",
    "@fortawesome/vue-fontawesome": "^2.0.10",
    "admin-lte": "^3.2.0",
    "axios": "^0.21.3",
    "bootstrap": "^4.6.2",
    "echarts": "^5.4.1",
    "html2pdf.js": "^0.10.0",
    "jquery": "^3.6.4",
    "js-cookie": "^2.2.1",
    "moment": "^2.29.4",
    "popper.js": "^1.12",
    "sweetalert2": "^8.19.1",
    "v-clipboard": "^2.2.3",
    "v-tooltip": "^2.1.3",
    "vform": "^2.1.2",
    "vue": "^2.6.14",
    "vue-barcode": "^1.3.0",
    "vue-echarts": "^6.5.4",
    "vue-final-modal": "^2.4.3",
    "vue-html-to-paper": "^1.4.4",
    "vue-i18n": "^8.28.2",
    "vue-js-toggle-button": "^1.3.3",
    "vue-lang-code-flags": "github:itsrafsanjani/vue-lang-code-flags",
    "vue-meta": "^2.4.0",
    "vue-mj-daterangepicker": "^0.1.11",
    "vue-moment": "^4.1.0",
    "vue-page-transition": "^0.2.2",
    "vue-router": "^3.6.5",
    "vue-select": "^3.20.2",
    "vue-tel-input": "^5.6.2",
    "vue2-daterange-picker": "^0.6.8",
    "vue2-teleport": "^1.0.1",
    "vuex": "^3.6.2",
    "vuex-router-sync": "^5.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.21.3",
    "@babel/eslint-parser": "^7.21.3",
    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
    "@babel/preset-env": "^7.20.2",
    "@vue/composition-api": "^1.7.1",
    "cross-env": "^7.0.3",
    "eslint": "^7.32.0",
    "eslint-config-standard": "^16.0.3",
    "eslint-plugin-import": "^2.27.5",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^4.3.1",
    "eslint-plugin-standard": "^4.1.0",
    "eslint-plugin-vue": "^7.20.0",
    "install-peers": "^1.0.4",
    "laravel-mix": "^5.0.9",
    "laravel-mix-versionhash": "^1.1.7",
    "resolve-url-loader": "^3.1.5",
    "sass": "^1.59.3",
    "sass-loader": "^10.4.1",
    "vue-masonry-css": "^1.0.3",
    "vue-template-compiler": "^2.6.14",
    "webpack-bundle-analyzer": "^3.9.0",
    "volar-service-vetur": "latest"
  }
}

解决方案 #

1. 安装兼容Vue@2.6.14的vue-tel-input版本 #

vue-tel-input从5.15.0开始要求Vue@2.7.10+，5.14.0及之前的版本完全兼容Vue@2.6.x。执行以下命令安装指定版本：

npm install vue-tel-input@5.14.0 --save

2. 使用npm overrides强制锁定兼容版本（npm 8.3+支持） #

如果想保留^5.6.2的版本范围但强制使用兼容版本，可在package.json中添加overrides字段：

{
  "overrides": {
    "vue-tel-input": "5.14.0"
  }
}

添加后执行npm install即可完成安装。

3. 清理缓存后重新安装 #

若上述方法无效，尝试清理npm缓存并重新安装依赖：

npm cache clean --force
rm -rf node_modules package-lock.json
npm install

内容的提问来源于stack exchange，提问作者Muhammad Umair Ghaznavi