搭建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项目运行起来了。

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

相关推荐
0***h9422 小时前
Windows 11 如何配置node.js
windows·node.js
Coder-coco2 小时前
在线商城系统|基于springboot vue在线商城系统(源码+数据库+文档)
java·数据库·vue.js·spring boot·后端·宠物
han_2 小时前
Vue.js 为什么要推出 Vapor Mode?
前端·javascript·vue.js
秋氘渔3 小时前
Vue 3 组合式写法:侦听器 watch 和 watchEffect 的区别及使用技巧
前端·javascript·vue.js·watch·watcheffect
光头程序员3 小时前
vue学习笔记
vue.js·笔记·学习
阿奇__4 小时前
element二次封装组件套餐 搜索组件 表格组件 弹窗组件
javascript·vue.js·elementui
The_era_achievs_hero4 小时前
Echarts
前端·javascript·echarts
亮子AI4 小时前
【JavaScript】修改数组的正确方法
开发语言·javascript·ecmascript
chenhdowue5 小时前
vxe-table 数据校验的2种提示方式
vue.js·vxe-table·vxe-ui