一、问题描述
昨天在准备打开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:UsersLinDesktopSGBlog资源前端工程sg-blog-vue>npm run dev
> sg-vue-blog@1.0.0 dev
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
node:internal/modules/cjs/loader:435
throw err;
^
Error: Cannot find module 'C:UsersLinDesktopSGBlog资源前端工程sg-blog-vuenode_modulesarray-includesindex.js'. Please verify that the package.json has a valid "main" entry
at 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. (C:UsersLinDesktopSGBlog资源前端工程sg-blog-vuenode_moduleswebpack-dev-serverlibpolyfills.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_modules
和package-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就好了。