手动构建vue+webpack遇到的各种坑。。。

2017-11-11  本文已影响0人  青春几米光

最近由于项目需要,自己开始着手于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项目的来源:

一步步构造自己的vue2.0+webpack环境

按照上面学习的小伙伴一定要注意依赖包的版本,不然你就会跳进坑里出不来了。。。

上一篇下一篇

猜你喜欢

热点阅读