第一次使用webstrom简单创建vue项目的一些报错实战记录

我的目录层级：工作文件夹为webpackedit，我这里只做简单依赖打包处理，src目录下的main.js引入mathUtil.js文件，将内容展示在index.html界面上，打包main.js后文件为dist目录下的main.js文件：

 使用webpack打包时报错无法加载文件（按理说这个命令执行后会生成bundle.js文件但是我生成的总是main.js，不过后期当我后面配置好webpack.config.js文件后就直接生成了：

 解决方法：使用管理员打开wenstrom在工作目录终端依次输入以下命令即可

可以打包但是关于mode报错:

 解决方法：这个mode是提示我们选择开发(development)或者生产模式(production)的打包方式，为了便于阅读打包文件的内容我这里使用了开发模式打包方式，当我们打包文件的时使用命令 ：入口文件路径（也就是你要打包的文件） -o  打包文件路径  --mode-devlopmen

 这是vue处理图片时的报错：

解决方案： 这个报错涉及vue的图片展示，需要url-loader和file-loader两个依赖,当我们下载好loader进行配置时（vue官网有各种loader的具体配置过程）会发现url-loader里面会有一个limit属性，它的大小限制了我们引入图片的大小：

limit>图片大小：此时图片会转化成一个base64字符串引入html; 

limit<图片大小：我们需要使用file-loader                                                                               

• 1)把图片换成小图;
• 2)把limit设置大一点(但是太大会影响图片加载的效率）;
• 3）建议下载file-loader。

下面是webpack.config.js里的配置，添加属性pubiclPath:'dist/'，帮助自动修改img打包路径（因为index.html和打包文件不在同一级目录，添加红色部分即可我这里注释掉了是因为后面做了配置，建议一开始还是一步步来）name属性定义了file-loader处理图片的命名方式，这样图片就会打包到dist/img目录下面了。

配置webpack.config.js报错：

解决方法：这个主要是webpack.config.js里的loader配置时的参数类型报错，我这里vue-loader少加了中括号，碰到这个报错建议对照官网配置检查loader配置有没有少符号。

最后在下载某个loader时就报错，建议先查找与已安装依赖相对应的依赖再下载，因为各依赖之间的版本有限制而且有些版本的依赖也不再使用了。

总结

到此这篇关于第一次使用webstrom简单创建vue项目的一些报错实战记录的文章就介绍到这了,更多相关webstrom创建vue项目报错内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论