vue安装vue-router出错问题及解决

 更新时间:2025年03月31日 09:35:34   作者:爱学习的大雄  
这篇文章主要介绍了vue安装vue-router出错问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

项目场景

在vue中安装vue-router

问题描述

提示:在安装过程中报错,缺少依赖:

PS D:\WebDeplpyer\workspace\Vue_Basic\vue_test> npm i vue-router
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: vue_test@0.1.0
npm ERR! Found: vue@2.6.14
npm ERR! node_modules/vue
npm ERR!   vue@"^2.6.11" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer vue@"^3.0.0" from vue-router@4.0.12
npm ERR! node_modules/vue-router
npm ERR!   vue-router@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\ASUS\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\ASUS\AppData\Local\npm-cache\_logs\2022-02-16T06_43_35_320Z-debug.log

原因分析

查阅资料,大部分都说是npm版本问题,新版本对下载要求比较严格。

解决方案

根据错误提示,在命令行中加入–legacy-peer-deps,由于vue与vue-router版本兼容的问题,需要在安装语句后加入需要下载vue-router版本,不然会下载最新的vue-router版本。

npm install --legacy-peer-deps vue-router@4.0.13

也有可能因为是你要下载的router版本过高,如果下载版本过高,在启动项目时会报错,可以下载低版本的vue-router

npm install vue-router@3.1.3 --save-dev

在package.json文件中查看是否下载成功

  "dependencies": {
    "animate.css": "^4.1.1",
    "axios": "^0.25.0",
    "chromedriver": "^98.0.0",
    "core-js": "^3.6.5",
    "nanoid": "^3.2.0",
    "pubsub-js": "^1.9.4",
    "vue": "^2.6.11",
    "vue-resource": "^1.5.3",
    "vue-router": "^3.1.3",
    "vuex": "^3.6.2"
  },

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 基于Vue3和Fabric.js实现交互式多边形绘制功能

    基于Vue3和Fabric.js实现交互式多边形绘制功能

    最近学习Fabric.js,正好想着利用这个机会去实现一个多边形的绘制工具,该工具允许用户在图片上通过点击创建多边形区域,支持自定义边数,并提供友好的用户交互体验,这种工具通常用于图像标注、区域选择和交互式地图应用等场景,需要的朋友可以参考下
    2025-05-05
  • Vue 实现定时刷新与自动更新(示例详解)

    Vue 实现定时刷新与自动更新(示例详解)

    在现代 Web 开发中,定时刷新页面或定时更新数据是一种常见的需求,尤其是在需要与服务器进行定时通信或者展示实时数据的场景下,Vue.js 提供了简单而有效的方法来实现定时刷新和自动更新,本文将介绍几种常见的定时刷新方式、适用场景、优缺点以及性能考虑
    2024-11-11
  • vue3 vite配置跨域及不生效问题解决

    vue3 vite配置跨域及不生效问题解决

    这篇文章主要介绍了vue3 vite配置跨域以及不生效问题,本文给大家分享完美解决方案,需要的朋友可以参考下
    2023-07-07
  • vue打包后,用后端接口报错304、404问题

    vue打包后,用后端接口报错304、404问题

    这篇文章主要介绍了vue打包后,用后端接口报错304、404问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05
  • 基于vue 实现token验证的实例代码

    基于vue 实现token验证的实例代码

    这篇文章主要介绍了基于vue 实现token验证的实例代码,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-12-12
  • 如何用Vue3切换中英文显示举例说明

    如何用Vue3切换中英文显示举例说明

    这篇文章主要给大家介绍了关于如何用Vue3切换中英文显示的相关资料,在Vue3中使用vue-i18n进行国际化设置,包括安装、配置、在组件中使用$t方法获取翻译字符串,以及可选的动态加载语言包以提高性能,需要的朋友可以参考下
    2024-11-11
  • vite+vue3项目初始化搭建的实现步骤

    vite+vue3项目初始化搭建的实现步骤

    本文主要介绍了vite+vue3项目初始化搭建的实现步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2024-07-07
  • vue3+vite实现低版本浏览器兼容的解决方案(出现白屏问题)

    vue3+vite实现低版本浏览器兼容的解决方案(出现白屏问题)

    项目全线使用vue3的时候,自然使用的是配套更加契合的vite打包工具,于是自然而然会用到很多新的语法,本文给大家介绍了vue3+vite实现低版本浏览器兼容的解决方案(出现白屏问题),需要的朋友可以参考下
    2024-04-04
  • vue项目tween方法实现返回顶部的示例代码

    vue项目tween方法实现返回顶部的示例代码

    这篇文章主要介绍了vue项目tween方法实现返回顶部,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • vite proxy同时配置多个代理方式

    vite proxy同时配置多个代理方式

    文章介绍如何在前端开发中配置多个代理进行本地mock,以便同时处理开发完成和未开发完成的接口,主要步骤包括修改`.env.development`文件,创建并配置`request-mock.js`文件,以及在`vite.config.js/ts`中添加代理配置
    2025-12-12

最新评论