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

最近由于项目需要,自己开始着手于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环境

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 冬天,虽然不像春天那样到处藏着绿色的生命;不像夏天那样生灵尽显风姿,展示自己的潇洒:不像秋天那样果实累累,落叶不断...
    夜歌如曦i阅读 3,576评论 0 0
  • 我做过的最具挑战性的事(比较近的): 接受天下第二美的挑战,二十四小时内写五篇千字文。 因此这篇文章的副标题也叫玉...
    九针玉儿阅读 5,086评论 0 0
  • 新生儿体重越重智商越高,这个说法准确吗?据英国的一项研究表明,新生儿体重与智力成正比,换句话说,新生儿体重越重,今...
    百安育儿阅读 7,913评论 0 0
  • 从一年级开始,我开始去看外面的世界,走过了不少地方,做一次次的过客。但,虽是过客,那些地方却也在我的心上留下芳香。...
    梦true阅读 3,947评论 2 3