github上下载了一个vue项目，运行提示webpack: Failed to compile

最新推荐文章于 2024-05-09 13:07:43 发布
最新推荐文章于 2024-05-09 13:07:43 发布
阅读量4.6k 收藏 16
点赞数 6
CC 4.0 BY-SA版权
文章标签： javascript vue.js html 前端 github
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wuww18stu/article/details/105537068

在github上下载了一个vue项目，运行提示webpack: Failed to compile.

微信公众号：前端程序猿之路
关注可了解更多的前端知识，反馈问题或建议，请公众号留言。
如果你觉得公众号内容对你有帮助，欢迎关注并转载

按照步骤，先执行了npm install ，结果，执行失败，报错一堆404
解决方法：

npm install -g cnpm --registry=https://registry.npm.taobao.org

然后运行项目，npm run dev 又报错一大堆，如下：
在这里插入图片描述在这里插入图片描述
根据提示安装

 npm rebuild node-sass

结果还是报错
百度后提示让重新安装webpack :

npm install --save-dev webpack -g

在这里插入图片描述
npm 简直不行啊，每次安装都404
换种方法安装：

npm install --save-dev webpack -g cnpm --registry=https://registry.npm.taobao.org

果然，成功了
在这里插入图片描述
但是，npm run dev的时候还是会报错404

再百度大神说

  1. 将 node_modules 文件夹删除
  2. 安装 node-sass
npm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/

在这里插入图片描述
如果上一句失败则执行下面，将已下载东西 重新编译

npm rebuild node-sass
  1. 安装其余的依赖
cnpm  install

在这里插入图片描述

cnpm run dev

启动项目
在这里插入图片描述
终于起来了，折腾的我都脑壳疼了

总结一下，引入别人项目的时候记得安装一下node-sass

安装 node-sass

npm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/

若上一句失败 将 已下载东西 重新编译

npm rebuild node-sass

然后再安装依赖

cnpm install

启动项目

cnpm run dev

参考链接： https://my.oschina.net/dawd/blog/3004693
在这里插入图片描述

【异常】vue前端项目提示ERROR Failed to compile with 4 errors These dependencies were not found:
本本本添哥
04-07 1091
如果你的项目使用了 webpack，确保 vue.config.js 或 webpack 的配置文件中的别名配置正确。在 Vue 项目中，@ 通常是一个别名，代表 src 目录的根路径。（2）你的别名配置不正确，导致 webpack 无法找到这些模块。这意味着这些文件或目录应该在你的项目的 src 目录下。（1）这些文件或目录不存在于你预期的路径中。确保上述配置中的路径与你的项目结构相匹配。确保这些文件或目录确实存在于你的项目中。确保你的组件或文件的导入语句正确无误。
记录一下在github上下载项目运行时发生的错误
weixin_45732235的博客
03-29 1362
D:\github\vue_todolist\SilverBullet-main\node_modules\watchpack\lib\chokidar.js:17 throw new Error( ^ Error: No version of chokidar is available. Tried chokidar@2 and chokidar@3. You could try to manually install any chokidar version. chokidar@3: Error: C
【Webpack】Webpack配置中遇到的问题
Shizukuu的博客
05-31 766
Chokidar 2 will break on node v14+ Error: Cannot find module 'webpack-cli’ 原因： 得要全局安装 解决方案： npm install webpack-cli -g webpack 报The ‘mode’ option has not been set, webpack will fallback to ‘production’ fo **原因：**没有指定mode 解决方案： 1.package.json中设置："scripts":.
前端项目运行报错webpack: Failed to compile.解决
heda3的博客
02-29 3010
该文章介绍了前端项目运行报错webpack: Failed to compile.解决方式
Angular编译有报错了：Failed to compile Module not found: Error: Can't resolve 'http' in
weixin_42564434的博客
12-02 1513
后来我发现我引用的是这个 import { HttpClient } from 'selenium-webdriver/http'; 应该是 import{HttpClient}from'@angular/common/http'; 然后就解决了 ...
vue运行npm run dev报错：‘webpack-dev-server‘ 不是内部或外部命令，也不是可运行的程序
fengzhishay的博客
04-26 7436
1、我先从git上拉到前端代码后，根据readme文档要求我执行了如下命令，下载依赖 npm install -g cnpm --registry ip地址:端口 值得注意的是，上面命令参数 -g 是下载全局依赖，不会将依赖下载到node_modules文件中去。因此，不会产生node_modules文件。 2、下载依赖成功后，我执行npm run dev 时报错：'webpack-dev-server' 不是内部或外部命令，也不是可运行的程序 3、我百度了一波，有一种说法说：是因为nod..
Failed to compile with x errors : This dependency was not found !异常的解决方案
2301_79779756的博客
05-09 3350
当使用像webpack这样的模块打包器或构建工具（如Vue CLI、Create React App等）来编译前端项目时，如果项目依赖的某个模块或资源没有正确安装或配置，编译器可能会抛出一个错误，提示“This dependency was not found!” 此类错误通常伴随着编译失败的提示，并会列出具体缺失的依赖项数量（例如，“Failed to compile with x errors”）。
vue-cli脚手架项目构建以及按需引入antd
weixin_47783830的博客
10-25 1399
安装vue-cli npm install vue/cli -g 查看vue版本 注意：V要大写 vue -V 如果下载速度太慢，可以使用cnpm淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org 此时下载出来的应该是2.9.6版本的脚手架 vue项目创建分为两种 vue-cli2 vue init webpack name vue-cli3 vue create name 一.CLI.
webpack把vue文件编译成html,深入使用webpack构建vue.js单页应用
weixin_31124869的博客
06-19 823
原标题：深入使用webpack构建vue.js单页应用1.安装依赖包项目中使用了vue.js，webpack，gulp，还有饿了么开源的elementUI，因为使用了es2015，所以还需要引入babel将es6的js代码转换成es5。必须用到的依赖如下： 此外gulp-cli、webpack、babel-cli最好使用全局安装，npm install -g webpack，就可以在命令行下方便的...
创建一个vue项目框架
weixin_64948861的博客
02-24 346
提示：vue新版本与旧版本冲突。
下载webpack依赖报错“Refusing to install package with name “webpack“ under a package”
水平有限，凑合看
03-03 847
当下载webpack报错 是因为npm init 初始化的时候没有修改package.json的name名字，用了默认的 ‘webpack’ 跟依赖包重名了 解决方法是把name名字换掉就好了 再次执行命令
git提交代码失败
进行中
06-09 911
解除ssl验证后，再次git即可 关联远程仓库后，把本地库的所有内容推送到远程库上时报错：unable to access ‘https://github.com/juanjuan-thy/jenkins_project.git/’: OpenSSL SSL_read: Connection was reset, errno 10054 git config --global http.sslVerify "false" 关联远程仓库后，把本地库的所有内容推送到远程库上时报错：unable to acc
记一次Vue3项目启动报错webpack
苏叶新城
04-23 2974
Vue3项目启动抱如下错 Error: module property was removed from Dependency (use compilation.moduleGraph.updateModule(dependency, module) instead) 原因：下载的webpack版本过高，目前是webpack5，降低至webpack4即可 # 卸载项目中webpack npm uninstall webpack #重新安装低版本： npm install --save-dev web
用webpack导入vue运行报错原因及解决办法
weixin_45122709的博客
11-02 929
用webpack导入vue运行报错及解决办法 在使用《用webpack导入vue并使用》中的方法引入vue后，运行报错 [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.(f
【解决】ERROR Failed to compile with 1 error；error in ./node_modules/pdfjs-dist/build/pdf.js
huangfuyk.的博客
01-23 3万+
接手别的同事的Vue项目，下载好依赖，执行npm run dev运行的时候，出现问题，如下： 根据报错信息发现"pdfjs-dist"装的也有，项目中也有用到，版本是2.0.943： 此时，再次执行npm i pdfjs-dist@2.0.943，单独下载pdfjs-dist依赖，然后再执行npm run dev，发现项目OK~ 举一反三，类似这样的报错信息，很大一部分情况都是由于单个依赖导致，可根据报错信息进行下载安装，进行解决。 ...
webpack编译时报错Module build failed，SyntaxError: Unexpected token＞ ＜div＞
一枚不断学习的小码农一枚~
04-06 1326
webpack编译时报错 ERROR in ./src/components/App.js Module build failed (from ./node_modules/babel-loader/lib/index.js): SyntaxError: Unexpected token (9:6) 7 | render() { 8 | return ( > 9 | <div> | ^ 10 | <im
构建托管于GitHub的Vue+Webpack的前端项目
万少博-FE
05-16 1748
时间：2017年5月16日15:15:49     优秀的前端工程师，总会探索未知的东西，通过学习和实践感受从无到有的体验，今天分享的是一个前后端分离的前端项目，该项目托管于GitHub可进行多人协作开发，通过VueJs框架构建，并由Webpack包管理工具进行模块打包和管理。 1、GitHub创建项目     如果您没有GitHub账号，请先行注册账号，之后进入自己账号进行如下
学习笔记——Vue项目Failed to Compile编译错误
qq_41339126的博客
02-09 9347
vue项目编译过程中经常出现莫名其妙的错误。
Error from chokidar (C:\): Error: EBUSY: resource busy or locked, lstat ‘C:\hiberfil.sys‘
热门推荐
一片叶子的博客
09-01 7万+
Error from chokidar (C:\): Error: EBUSY: resource busy or locked, lstat 'C:\hiberfil.sys' 错误截图： 前端遇到这个错误，网上提供的方法如下： 方法一：删除 node_modules，然后再重新安装(npm install 或者 cnpm install), 方法二：升级下node版本，删除node_modules ，然后运行npm cache clean 或者npm cache clean --force.
npm run dev > gym-system@0.1.0 dev > vue-cli-service serveBrowserslist: caniuse-lite is outdated. Please run: npx update-browserslist-db@latest Why you should do it regularly: https://github.com/browserslist/update-db#readme INFO Starting development server... ERROR Failed to compile with 1 error 23:34:06 error Conflict: Multiple assets emit different content to the same filename index.htmlERROR in Conflict: Multiple assets emit different content to the same filename index.htmlwebpack compiled with 1 error
最新发布
03-08
### 关于 `npm run dev` 和 Webpack 中多个资源生成相同文件名的问题 当执行 `npm run dev` 命令时，该命令会在 Node.js 项目中调用由 `package.json` 文件内的 `scripts` 部分指定的特定脚本[^1]。如果遇到错误提示 “Multiple assets emit different content to the same filename index.html”，这通常意味着构建过程中有不止一个插件或模块尝试向同一路径写入名为 `index.html` 的文件。 对于这个问题，在使用 Webpack 构建工具的情况下，可以采取如下措施来解决问题： #### 修改 Webpack 输出配置 确保 Webpack 的输出配置不会覆盖已有的 HTML 文件。可以通过调整 `output.filename` 或者设置唯一的哈希值给每次编译的结果文件增加唯一性标识符，防止重复命名冲突的发生。 ```javascript module.exports = { output: { path: path.resolve(__dirname, 'dist'), filename: '[name].[contenthash].js' } }; ``` #### 使用 HtmlWebpackPlugin 插件管理HTML模板 引入并正确配置 HtmlWebPackPlugin 可以帮助自动处理 HTML 文件的注入工作，并且能够避免手动编写静态页面带来的潜在风险。 ```javascript const HtmlWebpackPlugin = require('html-webpack-plugin'); plugins:[ new HtmlWebpackPlugin({ template:'./src/index.html', filename:'index.html' }) ] ``` 通过这种方式，HtmlWebpackPlugin 将负责创建或者更新目标目录下的 `index.html` 文件，而无需担心其他地方也试图修改同一个文件的情况。 #### 清理旧版本文件 考虑加入 CleanWebpackPlugin 来清理之前的打包产物，从而减少因残留文件引起的冲突可能性。 ```javascript const {CleanWebpackPlugin} = require('clean-webpack-plugin'); //... plugins:[ new CleanWebpackPlugin()] ``` 以上方法有助于解决由于多处同时生成同名文件而导致的构建失败问题。另外需要注意的是，检查项目的整体结构以及依赖关系也很重要，比如确认只有一个根级别的 `package.json` 存在于整个工程里[^2]，并且确保所有涉及前端路由或者其他动态加载机制的地方都没有无意间触发额外的 HTML 创建行为。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值