位置: IT常识 - 正文

Vue中 引入使用 babel-polyfill 兼容低版本浏览器(vuecdn方式引入)

编辑:rootadmin
Vue中 引入使用 babel-polyfill 兼容低版本浏览器

推荐整理分享Vue中 引入使用 babel-polyfill 兼容低版本浏览器(vuecdn方式引入),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vuecdn方式引入,vuecdn方式引入,vue的引入,vue引用axios,vue的引入,vue引入插件方法,vue中引入fs,vue引用vue,内容如对您有帮助,希望把文章链接给更多的朋友!

注意:本文主要介绍的 vue-cli 版本:3.x, 4.x; 最近在项目中使用 webpack 打包后升级,用户反馈使用浏览器(chrome 45)访问白屏。经过排查发现:由于 chrome 45 无法兼容 ES6 语法导致的,因此需要将项目中的 ES6 语法转 ES5 语法。

1. 兼容低版本浏览器方法

1.1 安装 babel-polyfill

babel-polyfill npm地址

npm i babel-polyfill

1.2 引入 方式一(推荐):main.js 顶部第一行

import 'babel-polyfill';

方式二:vue.config.js 中,在 chainWebpack 内添加以下代码

chainWebpack: config => { config.entry('main').add('babel-polyfill') config.entry.app = ['babel-polyfill', './src/main.js']}Vue中 引入使用 babel-polyfill 兼容低版本浏览器(vuecdn方式引入)

1.3(新增)在 babel.config.js 中配置

module.exports = { presets: [ ['@vue/app', { polyfills: [ 'es6.promise', 'es6.symbol', 'es6.array.iterator', 'es6.object.assign', ], useBuiltIns: 'entry', }], ],}

1.4 在 vue.config.js (新增)配置 transpileDependencies 如果还引入了其他插件而该插件内部也存在ES6写法,则需要将这些插件的 ES6 转换成 ES5,使用 transpileDependencies 直接将需要转换的插件放入。

transpileDependencies: [ 'element-ui', 'vant', 'js-cookie', 'vxe-table', 'xe-utils','vue-virtual-scroll-list','vue-socket.io' ],

vue-cli 官方文档中 transpileDependencies 说明

补充说明如安装配置 babel-polyfill 后仍无法兼容低版本浏览器,可适当降级 babel-polyfill 的版本;如使用 cnpm 安装依赖,可能会导致 transpiledependencies 无效,具体原因还未深究。可直接将 node_modules 全部删掉,重新使用 npm 安装所有依赖后,再次重新打包,目前问题已解决;vue-cli 使用 wokrer-loader 加载 web woker 时,使用 npm run build 有很大机率会打包失败:(报错:Syntax Error: Thread Loader (Worker 4) The “from” argument must be of type string. Received undefined)。原因 :thread-loader 与 worker-loader 有冲突。解决: vue.config.js 中配置 parallel: false 。构建正式环境关闭thread-loader。2. vue-cli 2.x 中配置 babel 转换

@babel/core:babel 的核心库 必引,一切 babel 转换操作都基于 @babel/core,因为它包含了编译的 transform 方法

npm install --save-dev @babel/core

@babel/polyfill:用于模拟完整的 ES2015+ 环境 注意:–save 而非 --save-dev,因为这是需要在源码之前运行的 polyfill;

npm install --save @babel/polyfill

安装之后,在项目入口 main.js 引入 @babel/polyfill 即可;

babel-loader:webpack 配置 loader 转换 babel-loader 允许使用 Babel 和 webpack 来转译 JavaScript 文件

npm install --save-dev babel-loader

webpack.base.config.js 文件中配置

module.exports = { module: { rules: [ { test: /\.js$/, loader: 'babel-loader', include: [resolve('src')] } ] }}

通过以上配置即可达到在 vue-cli 2.x 中进行 babel 转换

拓展:关于 Babel 简介

Babel 中文官方文档

Babel 是一个工具链,主要用于将采用 ECMAScript 2015+ 语法编写的代码转换为向后兼容的 JavaScript 语法,以便能够运行在当前和旧版本的浏览器或其他环境中。下面列出的是 Babel 能为你做的事情:1. 语法转换;2. 通过 Polyfill 方式在目标环境中添加缺失的特性 (通过引入第三方 polyfill 模块,例如 core-js);3. 源码转换(codemods);

本文链接地址:https://www.jiuchutong.com/zhishi/297483.html 转载请保留说明!

上一篇:Vue3报错:Property “xxx“ was accessed during render but is not defined on instance.(vue property decorator)

下一篇:CSS — 导航栏篇(一)(div+css导航栏)

  • 淘宝怎么取消红包默认使用(淘宝怎么取消红包使用)

    淘宝怎么取消红包默认使用(淘宝怎么取消红包使用)

  • 苹果里最近删除的照片怎么找回(苹果里最近删除没有了怎么恢复)

    苹果里最近删除的照片怎么找回(苹果里最近删除没有了怎么恢复)

  • 荣耀v20什么时候上市的(荣耀magic5什么时候发布)

    荣耀v20什么时候上市的(荣耀magic5什么时候发布)

  • 人工智能兴起于什么时候(人工智能的兴起时间)

    人工智能兴起于什么时候(人工智能的兴起时间)

  • 小红书图片怎样去水印(小红书图片怎样不被裁剪)

    小红书图片怎样去水印(小红书图片怎样不被裁剪)

  • se2有无线充电吗(se2可以无线充电吗)

    se2有无线充电吗(se2可以无线充电吗)

  • 天玑820相当于骁龙什么处理器(天玑820相当于骁龙845)

    天玑820相当于骁龙什么处理器(天玑820相当于骁龙845)

  • 抖音直播赞有什么用(抖音直播获得赞有钱吗)

    抖音直播赞有什么用(抖音直播获得赞有钱吗)

  • 动铁耳机的寿命(动铁耳机的寿命是多久)

    动铁耳机的寿命(动铁耳机的寿命是多久)

  • spnal00华为什么型号(华为手机spnal00什么型号)

    spnal00华为什么型号(华为手机spnal00什么型号)

  • 金山和小米的关系(金山和小米 入职哪家好)

    金山和小米的关系(金山和小米 入职哪家好)

  • 怎么完成微信群公告(怎么完成微信群里面的群公告)

    怎么完成微信群公告(怎么完成微信群里面的群公告)

  • qq删除留言对方知道吗(qq删除留言对方能看见吗)

    qq删除留言对方知道吗(qq删除留言对方能看见吗)

  • 抖音视频为什么没有播放量(抖音视频为什么不能转发到微信)

    抖音视频为什么没有播放量(抖音视频为什么不能转发到微信)

  • 计算机的特点及应用(计算机的特点及应用教学反思)

    计算机的特点及应用(计算机的特点及应用教学反思)

  • 小米手环4出现月亮图案是什么意思(小米手环4出现请先绑定和监管是怎么回事)

    小米手环4出现月亮图案是什么意思(小米手环4出现请先绑定和监管是怎么回事)

  • ipad无线网卡怎么用(ipad wifi版怎么插上网卡)

    ipad无线网卡怎么用(ipad wifi版怎么插上网卡)

  • ipad怎么加应用锁(ipad应用锁)

    ipad怎么加应用锁(ipad应用锁)

  • 手机文件传输助手怎么用(手机文件传输助手的文件在哪里)

    手机文件传输助手怎么用(手机文件传输助手的文件在哪里)

  • cad中立方米怎么打(cad打立方米)

    cad中立方米怎么打(cad打立方米)

  • 淘宝店铺皇冠代表什么(淘宝店铺皇冠代码怎么弄)

    淘宝店铺皇冠代表什么(淘宝店铺皇冠代码怎么弄)

  • 拉黑的微信好友怎么恢复聊天记录(拉黑的微信好友怎么恢复)

    拉黑的微信好友怎么恢复聊天记录(拉黑的微信好友怎么恢复)

  • 皮皮虾上怎样关注通讯录好友(皮皮虾怎么取关)

    皮皮虾上怎样关注通讯录好友(皮皮虾怎么取关)

  • 知乎怎么保存视频(知乎怎么保存视频到手机)

    知乎怎么保存视频(知乎怎么保存视频到手机)

  • 兰鲁斯特一座名为Pont Fawr的石拱桥,英国威尔士 (© Pajor Pawel/Shutterstock)(兰斯洛特)

    兰鲁斯特一座名为Pont Fawr的石拱桥,英国威尔士 (© Pajor Pawel/Shutterstock)(兰斯洛特)

  • vue如何实现路由跳转到外部链接界面(vue如何实现路由跳转缓存)

    vue如何实现路由跳转到外部链接界面(vue如何实现路由跳转缓存)

  • Python中if嵌套是什么?(pythonif嵌套语句)

    Python中if嵌套是什么?(pythonif嵌套语句)

  • 计提企业所得税会计科目
  • 上月社保未扣款怎么回事
  • 经营性投资是什么
  • 现金流量表填报说明
  • 附加税减征额怎么做分录
  • 哪个税种不需要认定就能在电子税务局申报
  • 计提存货跌价准备怎么计算
  • 工业土地划拨性质有年限吗
  • 账务处理和税前扣除如何处理
  • 期初余额什么时候在借方什么时候在贷方
  • 主营业务成本如何算
  • 周转材料摊销属于什么费用
  • 税务系统1+1+5
  • 个人去税务局开票流程
  • 文化事业建设税计算方法
  • 公司制作小程序定金能放在图物资吗
  • 中央下拨党费
  • 发票丢失登报声明怎么写
  • 固定资产摊销怎么做
  • 某公司购入一台需要安装的生产设备
  • 确认无法回收的应收账款会计分录
  • 小规模纳税人如何交增值税
  • 货币资金包括哪些
  • 应交税费留底增值税
  • 华为分享是什么意思关闭有影响吗
  • win7系统如何查看主板型号
  • 其他应付款冲回计入哪个科目
  • 开发票时已交的税金怎么做帐?
  • 苹果mac系统桌面空间不够
  • 怎么看腾讯游戏
  • 虚拟机系统vmware
  • mac菜单键怎么设置出来的
  • QQPCTray.exe是什么进程 QQPCTray.exe文件介绍
  • wlms.exe是什么
  • 一般纳税人购进农产品如何抵扣进项税额
  • 无法连接到你的相机,请重启手机
  • ges.dll
  • php定时执行代码
  • 研发费用加计扣除75%还是100%
  • 短期借款利息的核算不可能涉及的账户是
  • 企业通讯费管理办法
  • 巴黎拉丁区有个著名的人文景点叫做先贤祠
  • php中require和include是用来做什么的
  • 职工薪酬纳税调整明细表案例
  • php数组排序方法
  • crypto 解密
  • 销售旧货和销售使用过的物品税率
  • 办理车辆购置税流程
  • 增值税普通发票查询真伪
  • 快递明细单
  • 进项加计抵减会计分录怎么做
  • 上传附件不成功怎么回事
  • static在c语言中用法
  • 申请电子发票需要什么条件
  • 固定资产折旧常见方法
  • 小企业会计准则和一般企业会计准则的区别
  • 政府补助如何确定收入
  • 建筑业挂靠企业所得税如何收取?
  • 餐饮行业购入农产品
  • 专票 跨年
  • 代金券的利弊有哪些方面
  • 印花税的减免
  • 现金存入银行凭证怎么写
  • 付外汇代缴税费
  • 如何动态修改mysql的全局参数
  • sql server修改数据表
  • zmweb.exe是什么进程
  • 平板电脑中的电池工作时是将什么能转化成了电能
  • win7系统IE浏览器一点就闪退
  • win7系统更新怎么关闭
  • javascript 语言精粹(修订版)
  • 被调用的对象已与其客户端断开连接怎么办
  • import python-docx
  • python 描述符类
  • python中set用法
  • 山东省省级政务服务区有哪些
  • 十九届三中全会主题
  • 处室岗位是什么意思
  • 河南省国家税务局发票查询官网
  • 申报地税的流程图
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设