解决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 相关文章推荐
jquery自动完成插件(autocomplete)应用之PHP版
Dec 15 Javascript
JQuery中each()的使用方法说明
Aug 19 Javascript
jquery trim() 功能源代码
Feb 14 Javascript
jQuery 源码分析笔记(4) Ready函数
Jun 02 Javascript
JS中图片缓冲loading技术的实例代码
Aug 29 Javascript
JQuery的ready函数与JS的onload的区别详解
Nov 21 Javascript
javascript中setTimeout和setInterval的unref()和ref()用法示例
Nov 26 Javascript
JS实现的表格行鼠标点击高亮效果代码
Nov 27 Javascript
Angular2 父子组件通信方式的示例
Jan 29 Javascript
vue+webpack 更换主题N种方案优劣分析
Oct 28 Javascript
Vue图片浏览组件v-viewer用法分析【支持旋转、缩放、翻转等操作】
Nov 04 Javascript
JavaScript Date对象功能与用法学习记录
Apr 28 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
dedecms系统常用术语汇总
2007/04/03 PHP
ThinkPHP3.1新特性之动态设置自动完成和自动验证示例
2014/06/19 PHP
phpmailer在服务器上不能正常发送邮件的解决办法
2014/07/08 PHP
php函数重载的替代方法--伪重载详解
2015/05/08 PHP
PHP终止脚本运行三种实现方法详解
2020/09/01 PHP
javascript 特性检测并非浏览器检测
2010/01/15 Javascript
javascript中的undefined 与 null 的区别  补充篇
2010/03/17 Javascript
JS连接SQL数据库与ACCESS数据库的方法实例
2013/11/21 Javascript
toggle()隐藏问题的解决方法
2014/02/17 Javascript
鼠标拖拽移动子窗体的JS实现
2014/02/25 Javascript
使表格的标题列可左右拉伸jquery插件封装
2014/11/24 Javascript
AngularJS中的Directive自定义一个表格
2016/01/25 Javascript
json对象与数组以及转换成js对象的简单实现方法
2016/06/24 Javascript
vue.js入门教程之绑定class和style样式
2016/09/02 Javascript
jQuery扩展+xml实现表单验证功能的方法
2016/12/25 Javascript
jQuery实现的上传图片本地预览效果简单示例
2018/03/29 jQuery
微信小程序内拖动图片实现移动、放大、旋转的方法
2018/09/04 Javascript
玩转Koa之核心原理分析
2018/12/29 Javascript
生产制造追溯系统之在线打印功能
2019/06/03 Javascript
js实现3D旋转效果
2020/08/18 Javascript
[02:09:59]火猫TV国士无双dota2 6.82版本详解(下)
2014/09/29 DOTA
[38:32]DOTA2上海特级锦标赛A组资格赛#2 Secret VS EHOME第二局
2016/02/26 DOTA
最大K个数问题的Python版解法总结
2016/06/16 Python
Django入门使用示例
2017/12/12 Python
详解flask入门模板引擎
2018/07/18 Python
Python使用sklearn实现的各种回归算法示例
2019/07/04 Python
Python获取时间范围内日期列表和周列表的函数
2019/08/05 Python
Python获取统计自己的qq群成员信息的方法
2019/11/15 Python
利用python汇总统计多张Excel
2020/09/22 Python
Python偏函数实现原理及应用
2020/11/20 Python
python RSA加密的示例
2020/12/09 Python
Topshop法国官网:英国快速时尚品牌
2018/04/08 全球购物
菲律宾优惠券网站:MetroDeal
2019/04/12 全球购物
美国名牌香水折扣网站:Hottperfume
2021/02/10 全球购物
JavaScript 语句之常用 for 循环详解
2021/03/29 Javascript
Python学习之包与模块详解
2022/03/19 Python