搭建Vue环境遇到的问题

最近手里的安卓项目也接近了尾声,有一段时间没有更新版本了,甲方怕更新版本遇到不可调节的问题,公司业务偏前端比较多一点,个人前端基础薄弱,于是一直没有前端项目分给我做,趁着现在手里没有太多的活,赶紧学一下前端Vue,以便能够快速的投入到前端项目开发中。

起初的话我接手的电脑上是已经安装了Hbuilder开发工具的,然后我就点击运行到浏览器就报了下面的错:

从错误信息来看,Node.js是在尝试加载http_parser 模块时,无法找到该模块,导致了程序的崩溃。具体来说,这是因为 http_parser是一个用C++ 编写的低级别模块,专门用于HTTP的请求和响应的解析。当这个模块丢失或版本不兼容时,就会导致问题。

产生原因

这个问题的根本原因通常是 Node.js 版本不兼容 或 依赖冲突,尤其是在开发过程中使用了一些较老的依赖包。

1.Node.js 版本不兼容

有些 Node.js 版本与某些模块不兼容,尤其是一些底层的 HTTP 解析模块(如 http_parser)。当Node.js 的版本更新时,某些老的模块可能与新版本不兼容,进而导致错误。

2.依赖冲突

项目中的某些模块可能没有正确安装,或者在安装过程中出现了版本冲突。这类问题尤其在团队协作中比较常见,尤其是跨版本的依赖问题。

解决方案

那么,如何解决这个问题呢?这里有几种常见的解决方式。

1.更新 Node.js 版本

首先,确认你当前的 Node.js 版本。通过以下命令查看:
node -V

根据错误信息,你的版本为 v24.5.0,但这个版本并不是稳定的 LTS(长期支持)版本。建议使用官方推荐的 LTS 版本,例如 v16.x.x或 v18.x.x。这些版本经过了充分测试,与大多数依赖和模块兼容。

解决步骤:

1.访问 Node.js 官网 https://nodejs.org/zh-cn/。

2.下载并安装最新的 LTS 版本

3.安装完成后,再次运行项目,看看是否解决了问题。

2.删除 node modules 和 package-lock.json 后重新安装依赖

如果你已经确认了 Node.is 版本没有问题,但错误依然存在,那么很有可能是依赖安装不完全或者某些依赖的版本不兼容。这个时候,我们可以通过清除并重新安装依赖来解决。

解决步骤:

1.删除 node_modules 文件夹:
rm -rf node modules

2.删除 package-lock.json 文件:
rm package-lock.json

3.重新安装所有依赖
npm install

4.安装完成后,重新运行
npm run dev

然而我运行之后出现了这样的错误:

于是请教了一下我的前端朋友,他说你安装npm了嘛?我说就是通过官网下载node.js之后,然后运行下载的npm,然后他给我远程操作一番 最后发现在执行cmd命令时,npm下载不下来,最后他说你下载一个nvm工具来管理node吧,我说行接下来就是下载nvm工具的流程了。

nvm管理工具链接:https://nvm.uihtm.com/

注意:下载nvm之前,需要先把电脑里安装的node.js卸载干净,不然会有影响(血的教训)

安装步骤:
1.勾选红框里面的

2.选择nvm的存放路径

3.选择node.js的存放路径

4.全部勾选

5.添加邮箱(非必须)

6.就是在第5步点击next之后到新的页面再点击install了(我已经安装过了就没截图了)

接下来就是配置环境变量了,要把npm和node.js都配置进去不然不生效
1.找到用户变量新建NVM_HOME、NVM_SYMLINK两个变量,变量值对应你的安装路径

jing

2.系统变量里面找到Path然后把上面两个创建的变量添加进去,一定要点击确定,不然不生效

最后执行一下cmd命令看有没有生效:

1.执行命令 nvm i 出现下图就证明安装成功啦

2.nvm -v 查看安装的版本

3.nvm install 24.11.0 下载node.js的对应版本
4.nvm uninstall 24.11.0卸载node.js的对应版本
5.nvm use 24.11.0 使用node.js的对应版本

6.nvm list 查看目前用的版本

7.npm -v查看npm的版本

一切工作准备就绪啦,接下来就可以运行项目啦,但是注意的是还要确定一下自己的项目是vue2的还是vue3的,vue2的项目要对应使用20版本之后的node.js,vue3的的项目要对应使用15之前版本的node.js,不然项目还是运行不起来,最后我的项目是vue2写的,就用的24.11.0的node.js项目运行起来了。

接下来就大功告成了,忙活啦一天,也算是功夫不负有心人!

相关推荐
云浪9 小时前
Go 并发实战:从零实现一个高并发安全的任务调度器
javascript·后端·go
Flynt10 小时前
axios 被投毒半年后,我把 npm 的"安全防线"实测了一遍:最信任的 SHA512 是安慰剂
前端·npm·node.js
T_Wizard16 小时前
Windows 下 NVM 踩坑实录:命令找不到、下载超时、C盘爆满、环境冲突一次搞定
node.js
第404号工位17 小时前
40块钱二手瘦客户端,如何跑满家庭物联网中枢?(拒绝Docker爆盘实录)
linux·架构·node.js
OpsEye17 小时前
大模型账单对账难:不同厂商 Token 统计口径差异怎么处理
javascript·ai编程
全栈项目管理程序猿17 小时前
ArcGIS JS 基础教程(32):体元系列 - VoxelSlice 体元切片
前端·javascript
流烟默19 小时前
SSE 实战:在 SpringBoot + Vue 项目中零依赖实现轻量级实时消息推送
vue.js·spring boot·后端·sse
Hilaku19 小时前
AI 流式输出都用 SSE,什么时候必须换 WebSocket?
前端·javascript·程序员
奇牙coding20 小时前
Codex CLI 升级后多文件编辑静默失效:config.yaml 枚举变更排查与修复指南
java·前端·javascript·ai
执子念的飞鱼20 小时前
纯前端预览 275 种文件格式是怎么做到的
前端·vue.js·react.js