最近由于项目需要,自己开始着手于vue+webpack的学习。作为前端的小白,自己在学习的路上走的太艰难,以下是我在手动构建vue+webpack过程中遇到的各种坑:
1. Error: Can not found webpack commond
描述: 一般遇到这个错误,说明你编写的代码语法与本地安装的webpack版本不兼容。
解决方案: 其实是因为你本地将webpack全局安装了,但是在项目路径下第一次使用这个命令,会让系统找不到,这个时候需要执行以下命令,将全局的webpack关联当前的webpack执行命令
npm link webpack
参考: 无
2. XXXError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
描述: 一般遇到这个错误,说明你编写的代码语法与本地安装的webpack版本不兼容。
解决方案:
1)卸载webpack版本,重新安装需要的webpack版本;
2)查看API,编写正确规范的代码;
参考: 出错的原因是引入入口文件,直接使用了相对路径,这里应该使用绝对路径
3. Error: cannot find module 'XXX'
描述: 一般遇到这个错误,说明你本地项目依赖的一些模块或依赖包没有安装
解决方案:
参考:无1)如果直接报出缺少XXX模块,则可以使用npm install {模块名} --save-dev命令进行安装
2)如果不知道,则查看自己项目的package.json,确保包都配置完毕后,使用npm install命令直接安装
参考: 我本地构建项目的时候好多模块丢失,所以反复使用以上的两个命令进行操作
4. Error: Can't resolve '/Project/practice/vue-wkdemo/build/build/dev-client' in '/Project/practice/vue-wkdemo'
描述: 一般遇到这个错误,说明在项目中引入的文件路径写错了,因此执行项目时无法解析
解决方案: 检查自己的项目路径,一定要反复检查,不要理所当然地跳过这个步骤,不然会很坑
参考: 无
5. 最坑没有之一,实现vue+webpack的基础搭建之后,发现没有实现热更新,只有重启服务页面才会显示更改后的内容,不管是修改vue文件,还是html静态页面,都无法生效。这里纠结了大半天。。。
描述: 一般遇到这个错误,有很多种原因,依赖的模块版本不匹配、电脑缓存太多、浏览器停止监听部分端口等等
解决方案: 针对以上的问题,自己可以依次做尝试:
1)可以先检查依赖的模块版本
2)重启电脑,清除浏览器缓存
3)执行以下命令(这是我的一个小伙伴花了两天的时间找的解决方案,我也是这样解决的!)
echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf&& sudo sysctl -p
参考: 无
以上就是我遇到的各种坑。。。其余的问题都是和这些坑相似,解决方法套用即可。
最后提及一下自己参考构建vue+webpack的demo项目的来源:
按照上面学习的小伙伴一定要注意依赖包的版本,不然你就会跳进坑里出不来了。。。