解决Vue-cli无法编译es6的问题


Posted in Javascript onOctober 30, 2020

最近使用vue-cli创建项目的时候,遇到es6无法转换成es5的情况,项目在ios9下无法正常运行,在webpack.base.conf.js里面修改babel的配置项,添加src目录也没用,于是百度,谷歌找方法,最后自己想了想是不是没有配置.babelrc文件,于是在项目根目录创建.babelrc文件,同时在文件中编写

{ 
 "presets": 
 [
 "env"
 ],
 
 "plugins": 
 [
 "transform-runtime"
 ] 
 }

于是es6语法成功编译成es5,开心。

补充知识:vue cli2、cli3编译(打包)后的chunk-vendors.js文件存在es6语法

刚踩过一个大坑,使用vue脚手架搭建的项目build后chunk-vendors.js文件一直存在es6语法,在即将崩溃的边缘想到了一个方法,完美解决,

以下是解决步骤:

1.vue打包是不会编译node_modules中的代码,如果代码中存在node_modules中的引用,build后就会直接合并代码,不会被babel解析。

2.那么根源找到了,你要先找到node_modules中哪个包或者代码没有被babel,然后在webpack.base.conf.js 的 babel-loader中把这个包加入include就可以被babel解析了。

代码如下:

module: {
 rules: [
  {
  test: /\.js$/,
  loader: "babel-loader",
  include: [
   resolve("src"),
   resolve("test"),
   resolve("node_modules/webpack-dev-server/client"),
   resolve("node_modules/webpack/lib/ModuleFilenameHelpers.js")
  ]
  },
 ]
}

vue-cli3可参考官网 webpack相关配置修改loader

以上这篇解决Vue-cli无法编译es6的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一段好玩的JavaScript代码
Dec 01 Javascript
用javascript获取地址栏参数
Dec 22 Javascript
javascript 正则替换 replace(regExp, function)用法
May 22 Javascript
基于jQuery的弹出警告对话框美化插件(警告,确认和提示)
Jun 10 Javascript
使用javascript过滤html的字符串(注释标记法)
Jul 08 Javascript
js实现飞入星星特效代码
Oct 17 Javascript
javascript中函数作为参数调用的方法
Feb 09 Javascript
使用console进行性能测试
Apr 27 Javascript
js简单倒计时实现代码
Apr 30 Javascript
网站申请不到支付宝接口、微信接口,免接口收款实现方式几种解决办法
Dec 14 Javascript
使用ng-packagr打包Angular的方法示例
Sep 21 Javascript
Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现
Apr 01 Javascript
Vue2.0 ES6语法降级ES5的操作
Oct 30 #Javascript
Vue自定义表单内容检查rules实例
Oct 30 #Javascript
探索node之事件循环的实现
Oct 30 #Javascript
使用TS来编写express服务器的方法步骤
Oct 29 #Javascript
微信小程序将页面按钮悬浮固定在底部的实现代码
Oct 29 #Javascript
vue3.0搭配.net core实现文件上传组件
Oct 29 #Javascript
使用jQuery实现购物车
Oct 29 #jQuery
You might like
php中json_encode中文编码问题分析
2011/09/13 PHP
基于php设计模式中工厂模式详细介绍
2013/05/15 PHP
php无限遍历文件夹示例分享
2014/03/04 PHP
PHP 面向对象程序设计(oop)学习笔记(一) - 抽象类、对象接口、instanceof 和契约式编程
2014/06/12 PHP
解密ThinkPHP3.1.2版本之模块和操作映射
2014/06/19 PHP
一个用javascript写的select支持上下键、首字母筛选以及回车取值的功能
2009/09/09 Javascript
网络之美 JavaScript中Get和Set访问器的实现代码
2010/09/19 Javascript
javascript来定义类的规范小结
2010/11/19 Javascript
JQuery each()函数如何优化循环DOM结构的性能
2012/12/10 Javascript
jQuery提交多个表单的小技巧
2014/07/27 Javascript
基于javascript实现checkbox复选框实例代码
2016/01/28 Javascript
JCrop+ajaxUpload 图像切割上传的实例代码
2016/07/20 Javascript
jquery动态遍历Json对象的属性和值的方法
2016/07/27 Javascript
基于JS实现9种不同的面包屑和分布式多步骤导航效果
2017/02/21 Javascript
Vue2.0实现购物车功能
2017/06/05 Javascript
node.js实现的装饰者模式示例
2017/09/06 Javascript
详解JS浏览器事件循环机制
2019/03/27 Javascript
Vue实现浏览器打印功能的代码
2020/04/17 Javascript
Python3读取文件常用方法实例分析
2015/05/22 Python
Python中的FTP通信模块ftplib的用法整理
2016/07/08 Python
利用python实现简单的循环购物车功能示例代码
2017/07/05 Python
对python numpy.array插入一行或一列的方法详解
2019/01/29 Python
浅谈Python3中strip()、lstrip()、rstrip()用法详解
2019/04/29 Python
关于numpy中eye和identity的区别详解
2019/11/29 Python
莫斯科高科技在线商店:KremlinStore
2019/03/13 全球购物
什么是"引用"?申明和使用"引用"要注意哪些问题?
2016/03/03 面试题
传播学专业毕业生自荐信
2013/11/04 职场文书
旅游管理专业生自荐信范文
2014/01/02 职场文书
销售主管的自我评价分享
2014/01/03 职场文书
婚礼证婚人证婚词
2014/01/08 职场文书
《长相思》听课反思
2014/04/10 职场文书
企业文化标语大全
2014/06/10 职场文书
大学推普周活动总结
2015/05/07 职场文书
新郎婚礼致辞
2015/07/27 职场文书
学雷锋主题班会教案
2015/08/13 职场文书
CSS3 制作的书本翻页特效
2021/04/13 HTML / CSS