安装运行vue-element-admin的报错问题-解决办法

news2025/7/8 0:27:07

一、原本的安装方法-出错

官网安装链接如下:
https://panjiachen.gitee.io/vue-element-admin-site/zh/guide/#%E5%AE%89%E8%A3%85

我遇到的报错主要在以下阶段:

  1. 按上方安装链接里git clone后npm install无法安装
  2. npm install完成后无法启动,即npm run dev失败

后经查找网上各种资料,于2022.11.20完成安装并成功运行。
下面将分这两个阶段的错误记录解决方法。

二、npm install无法安装

报错信息我没有记录
有2种解决办法,推荐方法2,更简便

1.方法1

点击下方链接,在git clone并cd后的文件里,按照这位博主的3个步骤修改后,即可npm install成功。
https://gitee.com/panjiachen/vue-element-admin/issues/I4UQ2X

在这里插入图片描述

2.方法2

点击下方链接,直接下载这位博主修复npm install的文件,即可npm install
https://gitee.com/constfiv/vue-element-admin-fix-install-problem
优点:
无需方法1中需要自己修改文件的3个步骤,下载后即可npm install
(这个链接文件是方法1里博主自己修复好的文件)

三、npm run dev失败,项目无法启动

npm install成功后,npm run dev后却报错:

npm ERR! vue-admin-template@4.4.0 dev: vue-cli-service serve

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! vue-admin-template@4.4.0 dev: `vue-cli-service serve`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the vue-admin-template@4.4.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

我参考了以下几种解决方法,项目【仍无法启动】:
1. 卸载并重新安装webpack-dev-server
2. 在babel.config.js中,对presets进行修改
3. vue.config.js 中 open:true 注释掉

√√最终的解决方法:

=>降低node版本
此前我电脑里的node版本应该是16.18.0,可能对于vue-element-admin文件,此node版本过高。
降低node版本是参考这位博主提到的方法
https://github.com/PanJiaChen/vue-element-admin/issues/4054

注意事项:
=> 降低node版本的方法
(1)方法1(不推荐)
使用nvm管理工具来降低node的版本
但我按照这位博主的办法没有成功安装node,即在按其对应步骤安装好nvm和node特定版本号(例如:nvm install 12.17.0)且nvm use node 12.17.0成功的情况下,输入命令node -v后报错"npm ERR! errno -4048",后在此报错基础上尝试解决办法(例如修改系统变量等),都未成功,于是选择下面的方法2重装node。

(2)方法2(推荐)
推荐重新安装node,首先清除电脑中安装的node(这一步骤可参考这篇文章)
√重装node的操作步骤,我参考了如下这位博主的node安装方法,安装成功了
https://blog.csdn.net/qq_48485223/article/details/122709354
√因为需要降低node版本,我选择安装的是node 12.13.0版本,node-v12.13.0-x64.msi ,点击左边链接即可下载特定版本的node,安装配置好后可输入node -v检查版本号。

四、成功操作流程

我的成功操作步骤梳理如下:
如果你也遇到了本文<二>和<三>中的报错情况,可以按如下步骤操作

  1. 直接下载npm intsall修复好的文件,链接如下:https://gitee.com/constfiv/vue-element-admin-fix-install-problem
  2. 重装node,安装node低版本,步骤见本文<三>的方法2
  3. VS Code打开步骤1下载的文件,在终端里输入npm install(网速可能有点慢)
  4. 输入npm run dev,项目成功启动

后记:
本来在2022.11.19日晚上23点时想安装并成功运行vue-element-admin就早点休息的,结果处理各种报错问题一直弄到凌晨3点,期间一直想着先搁这,第二天再处理,但总是不死心,想着再试一个新的办法应该能解决,结果直到2022.11.20日凌晨3点也没有解决问题(在nvm安装node低版本时卡住了),无奈地只好休息,心情非常沮丧,做梦都是关于降低node版本的(emmm我知道我的心态还需要调节)。
早上9点起床又重装node,然后成功运行项目,并写下这篇文章。
希望本文的解决方法能对其他朋友有所帮助。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/405437.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

vue中的proxy代理的使用(解决跨域问题)

声明 1. 首先我们应该知道&#xff0c;前端axios在本地发送的请求如果你不把路径写全&#xff0c;它都是会默认加上自己项目所在的端口&#xff0c;就比如说&#xff1a; axios.get(/login) axios.get(/hello) 当我点击发送按钮之后&#xff0c;以上两行代码实际为&#xff1a;…

使用alist将云盘映射为WebDAV

使用alist将云盘映射为WebDAV1. 下载2. Windows系统安装与配置2.1 alist 启动与配置2.2 添加启动与关闭的脚本2.3 开机启动3. Linux系统安装与配置3.1 alist 启动与配置3.2 守护进程​4. 测试 WebDAValist是一款开软的将网盘及本地硬盘映射到网络端的软件&#xff0c;支持多种存…

【Web前端】怎样用记事本写一个简单的网页-html

前言 出于对网站的一些突然的兴趣&#xff0c;我开始了解网页是如何被设计出来的。 作者水平有限&#xff0c;如有问题&#xff0c;欢迎指出。 文章目录前言一. 对网页设计的基本了解1. 网站2. 网页编辑工具1&#xff09;语言2&#xff09;软件二. 第一个网页1. 实操——用记事…

watch跟computed的区别

大家好,我是大帅子,今天给大家讲一下watch跟computed的区别,下面我们直接开始吧 功能上&#xff1a;computed是计算属性&#xff0c;watch是监听一个值的变化&#xff0c;然后执行对应的回调。 是否调用缓存&#xff1a;computed中的函数所依赖的属性没有发生变化&#xff0c;…

【Web 安全】XSS 攻击详解

文章目录一、XSS 攻击概述二、XSS 攻击原理1. XSS的攻击载荷&#xff08;1&#xff09; script 标签&#xff08;2&#xff09; svg 标签&#xff08;3&#xff09; img 标签&#xff08;4&#xff09;body 标签&#xff08;5&#xff09; video 标签&#xff08;6&#xff09;…

VUE框架

1 概述 VUE是一款前端框架&#xff0c;免除了JavaScript中的DOM操作&#xff0c;简化书写 在JavaScript中有很多没有逻辑的繁琐的重复操作&#xff0c;如下 而VUE改善了这个问题&#xff0c;简化了DOM书写。 VUE是基于MVVM(Model-View-ViewModel)思想&#xff0c;实现数据的…

新一代状态管理工具 -- Pinia 上手指南

一&#xff1a;Pinia简介和五大优势 Pinia是vue生态里Vuex的替代者&#xff0c;一个全新的vue状态管理库。在Vue3成为正式版以后&#xff0c;尤雨溪强势推荐的项目就是Pinia。 那先来看看Pinia比Vuex好的地方&#xff0c;也就是Pinia的五大优势。 可以对Vue2和Vue3做到很好的支…

5个前端练手项目(html css js canvas)

前言&#xff1a; 首先祝大家端午节快乐。本篇文章有5个练手项目 对于刚学完前端三剑客的你们。应该是一个很好的实践 目录 &#x1f969;.跑马灯 1.1效果图&#xff1a; 1.2思路解析 1.3源码 &#x1f367;.彩虹爱心 2.1效果图 2.2思路解析 2.3源码 &#x1f32e;.闹钟…

vue中this.$set()的用法

1、this.$set()的作用 向响应式对象中添加一个属性&#xff0c;并确保这个新属性同样是响应式的&#xff0c;且触发视图更新。 this.$set()用于向响应式对象上添加新属性&#xff0c;因为 Vue 无法探测普通的新增属性。 简单来说&#xff1a;就是我们在methods中给数据添加了一…

尚品汇项目笔记

尚品汇项目笔记git代码地址前端Vue核心1、vue文件目录分析2、项目配置3、组件页面样式4、清除vue页面默认的样式5、pages文件夹6、footer组件显示与隐藏7、路由传参8、多次执行相同的push问题9、定义全局组件10、代码改变时实现页面自动刷新11、Home首页其它组件12、封装axios1…

微信小程序实现分享至朋友圈的功能

微信小程序实现分享至朋友圈的功能 微信小程序从基础库 2.11.3 开始&#xff0c;可将小程序页面分享到朋友圈。适用于内容型页面的分享&#xff0c;不适用于有较多交互的页面分享。 1 设置分享状态 小程序页面默认不可被分享到朋友圈&#xff0c;开发者需主动设置“分享到朋友…

HBuilder X的下载与使用(详细步骤)

一、HBuilder X的下载 这里我们前往HBuilder下载官网地址&#xff1a;https://www.dcloud.io/进入官网后&#xff0c;我们可以看到HBuilder目前有两个版本&#xff0c;一个是windows版&#xff0c;一个是mac版。下载一个自己电脑适合的版本&#xff0c;这里我下载步骤用的是wi…

【Ajax】如何通过axios发起Ajax请求

✍️ 作者简介: 前端新手学习中。 &#x1f482; 作者主页: 作者主页查看更多前端教学 &#x1f393; 专栏分享&#xff1a;css重难点教学 Node.js教学 从头开始学习 ajax学习 文章目录axios  什么是axios  axios发起GET请求  axios发起POST请求  直接使用axios发起get…

JS解构赋值

一、前言 解构赋值语法是一种 Javascript 表达式。通过解构赋值&#xff0c;可以将属性/值从对象/数组中取出&#xff0c;赋值给其他变量。本文将讨论解构赋值的作用与其用法。 目录 一、前言 二、用途 三、数组的解构 1.变量声明并且赋值时的解构 2.默认值 3.剩余数组赋值…

js字符串转换为对象格式的3种方法

背景&#xff1a; js字符串转换为对象格式&#xff0c;一般都会想到JSON.parse()&#xff0c;但数据不是标准的 JSON 格式的时候会解析出错&#xff0c;这时候就可以使用eval() 函数、new Function()方法来转换。 常用3种将字符串string转为json对象 方法&#xff1a; var str…

如何解决 npm ERR! Cannot read properties of null (reading ‘pickAlgorithm‘)报错问题

1、问题描述&#xff1a; 在vue项目中&#xff0c;当我们在终端使用指令&#xff1a;npm install 下载 node_modules (节点_模块) 时出现报错的情况。 node_modules是安装node后用来存放用包管理工具下载安装的包的文件夹。比如webpack、gulp、grunt这些工具。 主要是这个原因&…

基于Web的疫情防控管理系统

目 录 1 绪论........................................................................................................... 1 1.1 研究背景..................................................................................................................... 1 1…

前端如何调用后端接口进行数据交互(极简)

前端调用后端接口&#xff0c;获得数据并渲染 一、介绍 一个完善的系统&#xff0c;前后端交互是必不可少的&#xff0c;这个过程可以分成下面几步&#xff1a; 前端向后端发起请求后端接口接收前端的参数后&#xff0c;开始层层调用方法处理数据后端将最终数据返回给前端接…

vue2和vue3的区别(由浅入深)

前言 vue2和vu3之前的区别&#xff0c;一直以来是面试必考题目&#xff0c;如何回答&#xff0c;回答的层次决定了面试者的对于vue2&#xff0c;3的理解&#xff0c;以及对于vue3目前稳定版本发展的方向的了解&#xff0c;即考察使用程度&#xff0c;又考察了学习能力&#xf…

babel安装失败/报错详细解决方案报以下错误: core-js@2.6.12: core-js@<3.23.3 is no longer maintained and not recommended

babel安装失败/报错详细解决方案 **问题&#xff1a;**在VSCode中执行命令 npm install --global babel-cli 报以下错误&#xff1a; core-js2.6.12: core-js❤️.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V…