前端vue项目遇到的问题01——那些初级问题

前端vue项目遇到的问题01——那些初级问题

  • 1. npm install 问题
    • 1.1 依赖冲突
      • 1.1.1 详细问题
      • 1.1.2 报错原因
      • 1.1.3 解决问题
        • 1.1.3.1 方式1——无视冲突
        • 1.1.3.1 方式2——更换依赖版本
    • 1.2 nodejs版本问题
    • 1.3 node版本正确的情况(audit问题)(这个好像无视版本错误时可能会有)
    • 1.4 ValidationError: Invalid options object.报错(这个好像无视版本错误时可能会有)
    • 1.5 随意切换镜像地址进行 install
  • 2. 内存问题
    • 2.1 npm run dev 内存溢出

1. npm install 问题

1.1 依赖冲突

1.1.1 详细问题

  • 如下:
    npm ERR! While resolving: undefined@1.0.0
    npm ERR! Found: element-ui@2.13.2
    npm ERR! node_modules/element-ui
    npm ERR!   element-ui@"2.13.2" from the root project
    npm ERR! 
    npm ERR! Could not resolve dependency:
    npm ERR! peer element-ui@">=2.15.3" from @smallwei/avue@2.12.2
    
    在这里插入图片描述

1.1.2 报错原因

  • 报错原因:
    在新版本的npm中,默认情况下,npm install遇到冲突的peerDependencies时将失败。
  • 看错误提示信息:
    在这里插入图片描述
  • 根据上面的提示信息,可知有两种解决办法,请继续……

1.1.3 解决问题

1.1.3.1 方式1——无视冲突
  • 这个吧,个人不建议使用,因为这次无视之后install成功了,后面还有别的幺蛾子出现,所以不妨直接用对版本,非要这么解决的话,那你看吧!

  • 无视冲突,解决办法:
    使用 - -force--legacy-peer-deps可解决这种情况。

    –force 会无视冲突,并强制获取远端npm库资源,当有资源冲突时覆盖掉原先的版本。

    –legacy-peer-deps:安装时忽略所有peerDependencies,忽视依赖冲突,采用npm版本4到版本6的样式去安装依赖,已有的依赖不会覆盖。

    建议用--legacy-peer-deps 比较保险一点

    在终端重新安装即可解决

    npm install --legacy-peer-deps
    
1.1.3.1 方式2——更换依赖版本
  • package.json 文件中修改报错时提示的建议版本,如下:
    在这里插入图片描述

1.2 nodejs版本问题

  • 根据提示信息,考虑更好一下nodejs版本,以防后续各种幺蛾子出现!
    在这里插入图片描述
  • 关于Mac上安装多版本的node,可以看下面的文章,其他系统自行处理:
    Mac上安装多版本nodejs 并 随意切换node版本.

1.3 node版本正确的情况(audit问题)(这个好像无视版本错误时可能会有)

  • 如果nodejs版本已经和原先代码开发、打包用的版本一致了,还有其他类似下面的问题,如下:
    found 8 vulnerabilities (6 moderate, 2 high)run `npm audit fix` to fix them, or `npm audit` for details
    
    在这里插入图片描述
  • 解决办法:
    • 先,删除 node_modules 目录 和 package-lock.json文件
    • 然后,重新执行以下指令,问题即可解决
      npm install --no-fund --no-audit
      

1.4 ValidationError: Invalid options object.报错(这个好像无视版本错误时可能会有)

  • 错误信息如下:
     ERROR  ValidationError: Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.- options has an unknown property 'disableHostCheck'. These properties are valid:object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, http2?, https?, ipc?, liveReload?, magicHtml?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, server?, setupExitSignals?, setupMiddlewares?, static?, watchFiles?, webSocketServer? }
    
    在这里插入图片描述
  • 解决问题:
    vue.config.js 文件中的 disableHostCheck: true 配置注释掉,如下:
    在这里插入图片描述

1.5 随意切换镜像地址进行 install

  • 关于 install 慢的问题,可以下载淘宝镜像,但时不时又想使用nrm或其他镜像地址,那么请安装nrm工具进行管理,关于nrm以及随意切换镜像地址的,请看下面的文章:
    npm常用命令 + 前端常用的包管理工具 以及 npm淘宝镜像配置等.

2. 内存问题

2.1 npm run dev 内存溢出

  • 问题描述(windows下遇到的问题):
    在这里插入图片描述

  • 错误代码解释:
    错误码 errno 3221225725 是 Windows 操作系统下的一个错误码,对应的错误信息是 STATUS_HEAP_CORRUPTION,通常是由于堆栈损坏导致的程序崩溃。堆栈损坏可以是内存泄漏、指针越界、释放已释放的内存等原因导致的。

    如果你遇到了这个错误码,可以考虑以下几种解决方法:

    • 检查代码中是否有内存泄漏、指针越界、释放已释放的内存等问题。
    • 使用工具检测和修复堆栈问题,比如Windows自带的调试工具WinDbg。
    • 更新操作系统和相关软件,确保已经安装了最新的补丁和更新。
  • 解决问题:修改项目node内存配置大小,然后重新npm run dev即可,如下:
    找到package.json文件,修改node --max_old_space_size配置选项的大小(这个是M单位),如下:
    在这里插入图片描述

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

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

相关文章

Java链表简介

在Java中使用链表作为一种数据结构,并将其与MySQL作为底层数据库进行集成,涉及几个关键方面,包括数据存储、数据操作的效率、以及如何在应用层和数据库层之间映射数据结构。下面是对这些方面的分析: ### Java中的链表数据结构 链…

HTML5新特性、JS【初识JS 、JS核心语法】--学习JavaEE的day47

day47 HTML5新特性 定义文档类型 在文件的开头总是会有一个标签 语言文档类型声明方式html4<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">html5<!DOCTYPE html> 新增语义化标签 理解&…

vite-plugin-vue-devtools插件

vite-plugin-vue-devtools插件旨在帮助开发者更快地理解并调试Vue应用。它通过提供全面的功能和直观的界面&#xff0c;以图形化的方式展示应用程序状态&#xff0c;使开发者能够更方便地查看和管理Vue应用的各个方面。此外&#xff0c;该插件还支持Vue3.0版本&#xff0c;并且…

【Go专家编程——内存管理——垃圾回收】

垃圾回收 所谓的垃圾就上不在需要的内存块&#xff0c;垃圾如果不清理&#xff0c;这些内存块就没有办法再次被分配使用。在不支持垃圾回收的编程语言中&#xff0c;这些垃圾内存就上泄露的内存。 1. 垃圾回收算法 常见的垃圾回收算法有3种 引用计数&#xff1a;对每个对象…

yolov10 快速使用及训练

参考: https://docs.ultralytics.com/models/yolov10/ ultralytics其实大多数系列都能加载使用: 官方: https://github.com/THU-MIG/yolov10.git 代码参考: https://colab.research.google.com/github/roboflow-ai/notebooks/blob/main/notebooks/train-yolov10-object-…

一篇文章讲透排序算法之希尔排序

希尔排序是对插入排序的优化&#xff0c;如果你不了解插入排序的话&#xff0c;可以先阅读这篇文章&#xff1a;插入排序 目录 1.插入排序的问题 2.希尔排序的思路 3.希尔排序的实现 4.希尔排序的优化 5.希尔排序的时间复杂度 1.插入排序的问题 如果用插入排序对一个逆序…

521源码-免费代码基础学习-PHP如何运用变量教程

更多网站源码学习教程&#xff0c;请点击&#x1f449;-521源码-&#x1f448;获取最新资源 为什么要学习PHP&#xff1f;“我可以用JavaScript来实现程序编写。”但JavaScript的能力是有限的&#xff0c;JavaScript通常运行在浏览器&#xff08;客户端&#xff09;&#xff0…

go语言中for的4种循环形式总结

和其他语言不一样&#xff0c;go语言中的循环语句只有for一种&#xff0c;但是go里面的for却有3种不同的循环形式&#xff0c;总结如下&#xff1a; 1. 无限循环 for { //这个就是一个“死循环”&#xff0c;注意必须要有 break条件&#xff0c;否则就真成死循环了 } 2. fo…

Redis 源码学习记录:集合 (set)

无序集合 Redis 源码版本&#xff1a;Redis-6.0.9&#xff0c;本篇文章无序集合的代码均在 intset.h / intset.c 文件中。 Redis 通常使用字典结构保存用户集合数据&#xff0c;字典键存储集合元素&#xff0c;字典值为空。如果一个集合全是整数&#xff0c;则使用字典国语浪费…

PostgreSQL入门教程

PostgreSQL是一种开源的关系型数据库管理系统&#xff0c;它具有高度的可靠性、可扩展性和性能。下面是一个简单的PostgreSQL入门教程&#xff0c;帮助你开始使用这个强大的数据库管理系统。 步骤1&#xff1a;安装PostgreSQL 首先&#xff0c;你需要下载并安装PostgreSQL。你…

2024年最全的信息安全、数据安全、网络安全标准分享(可下载)

以上是资料简介和目录&#xff0c;如需下载&#xff0c;请前往星球获取&#xff1a;https://t.zsxq.com/Gz1a0

【全网最全】2024电工杯数学建模A题成品论文+前三题完整解答matlab+py代码等(后续会更新成品论文)

您的点赞收藏是我继续更新的最大动力&#xff01; 一定要点击如下的卡片链接&#xff0c;那是获取资料的入口&#xff01; 【全网最全】2024电工杯数学建模A题成品论文前三题完整解答matlabpy代码等&#xff08;后续会更新成品论文&#xff09;「首先来看看目前已有的资料&am…

Python 点云平面分割【RANSAC算法】

点云平面分割 一、介绍1.1 概念1.2 算法思路1.3 参数设置二、代码示例三、结果示例其他参考链接:C++中实现点云平面分割 一、介绍 1.1 概念 点云平面分割:可以在点云数据中找到平面并计算平面模型系数,同时输出平面点云及非平面点云。 1.2 算法思路 实现思路: 首先,采用…

Sass是什么?有哪些优缺点?

目录 一、Sass是什么&#xff1f; 二、Sass的优缺点 三、Sass与SaaS 一、Sass是什么&#xff1f; Sass是世界上最成熟、最稳定、最强大的专业级CSS扩展语言。 Sass makes CSS fun again. Sass is an extension of CSS, adding nested rules, variables, mixins, selector in…

【C++高阶(一)】继承

目录 一、继承的概念 1.继承的基本概念 2.继承的定义和语法 3.继承基类成员访问方式的变化 ​编辑 4.总结 二、基类和派生类对象赋值转换 三、继承中的作用域 四、派生类的默认成员函数 1.派生类中的默认构造函数 2.派生类中的拷贝构造函数 3.派生类中的移动构造函数…

英语学习笔记25——Mrs. Smith‘s kitchen

Mrs. Smith’s kitchen 史密斯太太的厨房 词汇 Vocabulary Mrs. 夫人【已婚】 复习&#xff1a;Mr. 先生 全名 / 姓    Mrs. 夫人 全名 / 丈夫的姓    Miss 小姐&#xff08;未婚&#xff09; 全名 / 姓    Ms. 女士 全名 / 姓 查看婚姻状况&#xff0c;可以观察…

springboot项目中图片上传之后需要重启工程才能看到图片?

需求背景 最近在做一个用户自定义上传头像的小需求&#xff0c;用户上传头像然后需要立马回显。 需求是很常见的、正当的需求。如果不使用到对象存储这类服务&#xff0c;我们把用户头像的图片文件仅存在本地就可以了。我们在开发的过程中为了工程管理方便通常下意识会将图片…

freertos串口DMA队列发送卡死

调试回调函数的时候&#xff0c;我在cube中删除了默认的DMA通道&#xff0c;又新增了另外一个通道&#xff0c;导致NVIC中&#xff0c;该通道的优先级为0&#xff0c;后来改成了5就正常了。

Modbus TCP转Profinet网关测试配置案例

本案例采用XD-ETHPN20网关做为Modbus TCP通信协议设备与Profinet通信协议设备连接的桥梁。Modbus TCP是一种基于TCP/IP协议的工业通信协议&#xff0c;而Profinet则是用于太网通信的协议。Modbus TCP转Profinet网关可实现这两种不同协议之间的数据交换和传输&#xff0c;极大地…

算法刷题笔记 逆序对的数量(C++实现)

文章目录 题目描述解题代码&#xff08;蛮力版&#xff09;解题代码&#xff08;基于归并排序&#xff09; 题目描述 给定一个长度为n的整数数列&#xff0c;请你计算数列中的逆序对的数量。逆序对的定义如下&#xff1a;对于数列的第i个和第j个元素&#xff0c;如果满足i<…