好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

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

我的目录层级:工作文件夹为webpacked IT ,我这里只做 简单 依赖打包处理,src目录下的m ai n.js引入mathUtil.js文件,将内容展示在index.ht ML 界面上,打包main.js后文件为dist目录下的main.js文件:

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

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

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

 解决方法:这个mode是提示我们选择开发(development) 或者 生产模式( PR oduction)的打包方式,为了便于阅读打包文件的内容我这里使用了 开发模式 打包方式,当我们打包文件的时使用命令 :入口文件路径(也就是你要打包的文件) -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里的配置,添加属性p ub iclPath:& # 39;dist/',帮助自动修改 img 打包路径(因为index.html和打包文件不在同一级目录,添加 红色 部分即可我这里注释掉了是因为后面做了配置,建议一 开始 还是一步步来)n am e属性定义了file-loader处理图片的命名方式,这样图片就会打包到dist/img目录下面了。

配置webpack.config.js报错:

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

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

总结

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

您可能感兴趣的文章: 利用webstrom调试Vue.js单页面程序的方法教程 webstrom Debug 调试vue项目的方法步骤

总结

以上是 为你收集整理的 第一次使用webstrom简单创建vue项目的一些报错实战记录 全部内容,希望文章能够帮你解决 第一次使用webstrom简单创建vue项目的一些报错实战记录 所遇到的问题。

如果觉得 网站内容还不错, 推荐好友。

查看更多关于第一次使用webstrom简单创建vue项目的一些报错实战记录的详细内容...

  阅读:34次