文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2023-02-13 15:00

关注

我的目录层级:工作文件夹为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                                                                               

下面是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项目报错内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯