网站建设规范布局,长沙好博网站建设有限公司,重庆九龙网站建设,赣州网络推广行业一、问题描述
昨天在准备打开b站up主三更草堂的博客项目08-02.基础版本前端联调_哔哩哔哩_bilibili中的前端工程时#xff0c;使用以下两个命令分别都出现了报错。
命令1#xff1a; # install dependenciesnpm install 命令2#xff1a; # serve with hot reload at loca…一、问题描述
昨天在准备打开b站up主三更草堂的博客项目08-02.基础版本前端联调_哔哩哔哩_bilibili中的前端工程时使用以下两个命令分别都出现了报错。
命令1 # install dependenciesnpm install 命令2 # serve with hot reload at localhost:8080npm 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 vue2报错信息同上 输入 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-vuenpm run dev sg-vue-blog1.0.0 devwebpack-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_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就好了。
