【Node.js相关问题】npm install报错后重装node版本及npm环境变量配置及npm run dev启动报错原因分析解决办法

一、问题描述

昨天在准备打开b站up主三更草堂的博客项目08-02.基础版本前端联调_哔哩哔哩_bilibili中的前端工程时,使用以下两个命令分别都出现了报错。

命令1

# install dependencies
npm install

命令2

# serve with hot reload at localhost:8080
npm run dev

二、报错分析

2.1 首先是淘宝镜像过期的问题,这个解决办法比较简单,参考该问题解决博客就行。

解决办法:

参考:npm淘宝镜像过期解决办法-CSDN博客

2.2 然后更换完镜像后输入命令1 npm install后,报错如下:

以为是python的问题,然后按网上的解决方法下载安装配置好python后,再次运行该命令还是报错,这次的报错信息如下:

结果把visual studio看成vscode了......又上网查了一大堆办法,失败......

2.3 无奈问了群友,说是降下版本试试,于是将nodejs版本从20降到了16

下载地址:Index of /download/release/v16.20.2/,我下载的是64.msi那个(倒数第五个)

注意:

先把旧的删了,不过如果你有其他项目要用之前的版本就不能删,可以用nvm管理多个版本(我没试过)

安装路径不能有中文!!空格最好也不要有

安装过程如图:

安装完成后用命令 node -v 查看一下版本

再次输入命令1,还是报错,报错信息如下:

输入 npm i vue@2报错信息同上

输入 npm -v 后报错信息也同上

⭐2.4 发现问题,定位到图中npm改文件夹的路径

查看环境变量配置

三、解决办法

⭐2.4 npm install命令报错及npm环境变量配置及处理

将上图npm的环境变量删除后,卸载nodejs重装一下,然后再次查看或配置该环境变量路径,之前可能是有缓存(同名npm文件夹但内容有区别)

再次输入命令1,成功了!!

2.5 下一步,输入命令2 npm run dev,又报错了,报错信息如下:

C:\Users\Lin\Desktop\SGBlog\资源\前端工程\sg-blog-vue>npm run dev> sg-vue-blog@1.0.0 dev
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.jsnode:internal/modules/cjs/loader:435throw err;^Error: Cannot find module 'C:\Users\Lin\Desktop\SGBlog\资源\前端工程\sg-blog-vue\node_modules\array-includes\index.js'. Please verify that the package.json has a valid "main" entryat tryPackage (node:internal/modules/cjs/loader:427:19)at Function.Module._findPath (node:internal/modules/cjs/loader:640:18)at Function.Module._resolveFilename (node:internal/modules/cjs/loader:1014:27)at Function.Module._load (node:internal/modules/cjs/loader:873:27)at Module.require (node:internal/modules/cjs/loader:1100:19)at require (node:internal/modules/cjs/helpers:119:18)at Object.<anonymous> (C:\Users\Lin\Desktop\SGBlog\资源\前端工程\sg-blog-vue\node_modules\webpack-dev-server\lib\polyfills.js:6:18)at Module._compile (node:internal/modules/cjs/loader:1198:14)at Object.Module._extensions..js (node:internal/modules/cjs/loader:1252:10)at Module.load (node:internal/modules/cjs/loader:1076:32) {code: 'MODULE_NOT_FOUND',path: 'C:\\Users\\Lin\\Desktop\\SGBlog\\资源\\前端工程\\sg-blog-vue\\node_modules\\array-includes\\package.json',requestPath: 'array-includes'
}

无奈,尝试询问gpt,得到的解决办法如下:

从错误信息来看,问题出现在尝试运行你的 Vue 项目时,Node.js 报告无法找到 array-includes 模块。这通常意味着该模块没有被正确安装或者某些文件丢失。为了解决这个问题,你可以按照以下步骤操作:

1. 清除node_modulespackage-lock.json

首先,尝试清理你的项目依赖。在项目根目录下执行以下命令:

rm -rf node_modules rm package-lock.json

如果你是 Windows 用户,可以在命令提示符(cmd)或 PowerShell 中使用以下命令来删除这些文件/文件夹:

rmdir /s /q node_modules del package-lock.json

2. 重新安装依赖

接下来,使用 npm 重新安装你的项目依赖。在项目根目录下执行:

npm install

这将会基于你的 package.json 文件重新安装所有依赖项。

3. 确认array-includes依赖

如果问题仍然存在,可能是因为array-includes包没有被正确地列入你的package.json文件的依赖中。你可以手动添加它,然后再次运行安装命令。

首先,确认array-includes是否真的是你项目的依赖。如果是,请确保它已经被添加到package.json文件中。如果没有,你可以通过以下命令添加它:

npm install array-includes --save

4. 检查Webpack配置

由于错误发生在启动 webpack-dev-server 的过程中,建议检查webpack.dev.conf.js文件中是否有对array-includes的特殊引用或配置。确保没有路径或配置错误。

5. 运行开发服务器

完成上述步骤后,尝试再次启动你的开发服务器:

npm run dev

如果问题仍然存在,建议检查是否有其他的包依赖问题或者在你的代码中错误地引用了array-includes。这种类型的错误通常与依赖管理有关。通过清理并重新安装依赖,大多数情况下可以解决问题。如果问题依旧,仔细检查package.json和相关的配置文件,确保所有依赖都被正确配置和引用。

⭐2.5 npm run dev报错解决办法

参考上述gpt的方法,将前端工程项目文件夹中的node_modules和package-lock.json文件删除,然后重新输入命令

启动成功:

总结

第一个问题就是重装node之后,变量那边重新配置一下npm路径;第二个问题是在项目下modules和package-lock.json这两个删掉以后重新npm install和npm run dev就好了。

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

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

相关文章

服务器加密机的工作原理是什么

服务器加密机在现代信息社会中扮演着至关重要的角色。它是确保服务器数据安全、保障数据传输机密性&#xff0c;以及防范恶意攻击和网络窃取的关键技术手段。本文将对服务器加密机进行详细解读&#xff0c;分析其原理、应用以及在未来发展中的重要性。 服务器加密机是一种专门用…

跨境电商选品实战——Ownips静态ip代理+Python爬虫轻松搞定Lazada电商选品

文章目录 一、引言二、Lazada电商平台爬虫实战2.1、分析Lazada电商平台的商品列表接口2.2、定位商品列表计算逻辑2.3、封装IP代理2.4、运行爬虫 三、数据处理及选品分析四、Ownips——企业级全球静态IP代理 一、引言 互联网与外贸的结合&#xff0c;催生了蓬勃兴起的跨境电子商…

vue的router

目前单页应用&#xff08;SPA&#xff09;越来越成为前端主流&#xff0c;单页应用一大特点就是使用前端路由&#xff0c;由前端来直接控制路由跳转逻辑&#xff0c;而不再由后端人员控制&#xff0c;这给了前端更多的自由。 当用户在应用中进行导航时&#xff0c;Vue Router …

基于EasyCVR视频技术的流媒体视频融合与汇聚管理系统建设方案

流媒体视频融合与汇聚管理系统可以实现对各类模块化服务进行统一管理和配置等操作&#xff0c;可实现对应用服务的整合、管理及共享&#xff0c;以标准接口的方式&#xff0c;业务平台及其他第三方业务平台可以方便地调用各类数据&#xff0c;具有开放性和可扩展性。在流媒体视…

122. 买卖股票的最佳时机 II(力扣LeetCode)

文章目录 122. 买卖股票的最佳时机 II题目描述贪心 122. 买卖股票的最佳时机 II 题目描述 给你一个整数数组 prices &#xff0c;其中 prices[i] 表示某支股票第 i 天的价格。 在每一天&#xff0c;你可以决定是否购买和/或出售股票。你在任何时候 最多 只能持有 一股 股票。…

【强化学习抓取】偏机器人领域(略)

文章目录 1. A Grasp Pose is All You Need: Learning Multi-fingered Grasping with Deep Reinforcement Learning from Vision and Touch摘要和结论引言相关工作模型框架 1. A Grasp Pose is All You Need: Learning Multi-fingered Grasping with Deep Reinforcement Learni…

基于PPT战略的河南嵩县旅游扶贫模式研究

目录 摘 要 3 Abstract 3 &#xff08;一&#xff09;研究背景 4 &#xff08;二&#xff09;研究意义 5 &#xff08;三&#xff09;研究目的 6 二、概念界定及相关研究 6 &#xff08;一&#xff09;PPT战略 6 &#xff08;二&#xff09;PPT战略相关研究 6 &#xff08;三&…

基于YOLOv8/YOLOv7/YOLOv6/YOLOv5的常见手势识别系统(深度学习模型+UI界面代码+训练数据集)

摘要&#xff1a;开发手势识别系统对于增强人机交互和智能家居控制领域的体验非常关键。本博客详尽阐述了通过深度学习技术构建手势识别系统的过程&#xff0c;并附上了全套实施代码。系统采用了先进的YOLOv8算法&#xff0c;并通过与YOLOv7、YOLOv6、YOLOv5的性能对比&#xf…

AMS、PMS和WMS学习链接

原文: Framework学习&#xff08;三&#xff09;之PMS、AMS、WMS_ams pms-CSDN博客 1:PackageMangerService&#xff08;PMS&#xff09;讲解博主 PMS系列我觉得csdn博主jeanboy讲的非常好&#xff0c;这里附上博主的博客链接jeanboy。这是一位资深级的博客专家。关于他PMS的讲…

Java打乱数组元素

package com.mohuanan.exercise;import java.util.Random;//打乱数组的元素 public class ExerciseDemo05 {public static void main(String[] args) {int[] arr {1,2,3,4,5};Random r new Random();for (int i 0; i < arr.length; i) {int randomIndex r.nextInt(5);in…

project generator 简单使用

文章目录 1 progen 资源2 使用简介2.1 安装2.2 添加 target&#xff08;可选&#xff09;2.3 替换 CMake 模板&#xff08;可选&#xff09;2.4 创建 progen 项目 3 总结 1 progen 资源 0&#xff09;简介&#xff1a;progen&#xff08;project-generator&#xff0c;项目生成…

·xss文件上传漏洞

xss文件上传漏洞 本质&#xff1a;对上传的文件不加限制的漏洞&#xff0c;例如上传PHP文件。 面对一定程度上的防护&#xff0c;我们应该如何绕过。 一&#xff0c;一句话木马&#xff1a; <&#xff1f;php Eval($.post{})> ::$DATA ([‘pass’]); ?> 再ur…

C语言 - 各种自定义数据类型

1.结构体 把不同类型的数据组合成一个整体 所占内存长度是各成员所占内存的总和 typedef struct XXX { int a; char b; }txxx; txxx data; typedef struct XXX { int a:1; int b:1; …

字节一面:TCP 和 UDP 可以使用同一个端口吗?

数据包是计算机网络通信的核心&#xff0c;包含头部和数据负载。TCP和UDP协议在传输层使用端口号区分服务和应用。操作系统通过IP头部中的协议字段和端口号来管理网络流量&#xff0c;确保TCP和UDP流量即使共用端口号也不会相互干扰。 在现代计算机网络中&#xff0c;数据传输…

基于Springboot的代驾管理系统(有报告)。Javaee项目,springboot项目。

演示视频&#xff1a; 基于Springboot的代驾管理系统&#xff08;有报告&#xff09;。Javaee项目&#xff0c;springboot项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体系结构&…

【DAY11 软考中级备考笔记】数据结构 查找和排序

数据结构 查找和排序 3月12日 – 天气&#xff1a;晴 1. 顺序查找 顺序查找就是简单的从头一个一个的进行比较&#xff0c;注意它的平均查找长度 2. 折半查找 折半查找和二叉排序树一致&#xff1a; 优点&#xff1a;查找效率很高 缺点&#xff1a;要求必须是循序存储并且表中…

《计算机网络》考研:2024/3/11:2.1.6-习题精选(5、6题暂未完成)

2024/3/11 2.1.6 习题精选 一、单项选择题 我的答案&#xff1a;1.D 2.A 3.C 4.B 5.A 标准答案&#xff1a;1.D 2.A 3.B 4.B 5.A 3、【解】&#xff1a; 并行传输的特点&#xff1a;距离短、速度快。 串行传输的特点&#xff1a;距离长、速度慢。 在计算机内部通常为了保证速…

基于 Jenkins 搭建一套 CI/CD 系统

一、CI/CD环境介绍 本次要实现如下效果&#xff0c;开发人员完成功能开发并提交代码到gitlab仓库&#xff0c;jenkins自动完成拉取代码、编译构建、代码扫描&#xff08;sonarqube&#xff09;、打包&#xff0c;再自动化完成部署到Tomcat服务器提供访问。 环境准备三台Centos…

机器学习/深度学习 模型修正能力

一、模型修正 在了解模型修正能力之前&#xff0c;我们现在了解下‘模型修正’。 在深度学习模型训练中&#xff0c;模型通过反向传播计算损失函数的梯度&#xff0c;基于梯度利用梯度下降等优化算法更新模型参数以最小化损失函数。这个过程被称为‘模型修正’。 二、模型修正…

Linux - tmux命令

0、常用参数 tmuxnew-s<name> 新建名为name的会话&#xff08;无-s参数则默认以数字命名&#xff09; &#xff08;常用&#xff09; tmux a 恢复上一次的会话 &#xff08;常用&#xff09; tmux a-t<name> 恢复&#xff08;attach&#xff09;名为name的会话 &a…