Vue的兼容性解决方案Babel-polyfill案例解析

 更新时间:2023年11月07日 17:02:54   作者:前端扎啤  
这篇文章主要介绍了Vue的兼容性解决方案Babel-polyfill的相关知识,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧

Babel-polyfill可以抹去旧版本浏览器不熟悉的特征,在babel.config.js中写出

在这里插入图片描述

如果有依赖需要 polyfill,你有几种选择:

1. 如果确切知道有兼容性问题的依赖包名,可以配置项目根目录下的vue.config.js,将依赖包名添加到transpileDependencies键中,这会为该依赖同时开启语法语法转换和根据使用情况检测 polyfill。

例如:

module.exports = {
  transpileDependencies: ["sl-vue-tree"] // 需要编译的依赖包名
}

2.如果确切的知道需要转译的语言特性,可以配置根目录下的babel.config.js,为presets的值添加所需要的 polyfill。

// babel.config.js
module.exports = {
  presets: [
    ['@vue/app', {
      polyfills: [
        'es6.promise',
        'es6.symbol'
      ]
    }]
  ]
}

如果相关依赖带ES5代码并明确列出所需的polyfill:您可以使用@vue / babel-preset-app的polyfills选项预先包含所需的polyfill。请注意,es6.promise是默认包含的,因为libs依赖Promises是很常见的。

3.然而更多的情况是,我们并不确切的知道项目中引发兼容问题的具体原因,这时还可以配置为根据兼容目标导入所有 polyfill,需要设置babel.config.js为:

module.exports = {
  presets: [
    ['@vue/app', {
        useBuiltIns: 'entry'
    }]
  ]
}

同时在入口文件(main.js)第一行添加

import '@babel/polyfill

这会根据 browserslist 目标导入所有 polyfill,这样你就不用再担心依赖的 polyfill 问题了,但是因为包含了一些没有用到的 polyfill 所以最终的包大小可能会增加。

到此这篇关于Vue的兼容性解决方案Babel-polyfill的文章就介绍到这了,更多相关Vue兼容性内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue $attrs和$listeners的使用与区别

    vue $attrs和$listeners的使用与区别

    本文主要介绍了vue $attrs和$listeners的使用与区别,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-02-02
  • vue-cli 项目打包完成后运行文件路径报错问题

    vue-cli 项目打包完成后运行文件路径报错问题

    这篇文章主要介绍了vue-cli 项目打包完成后运行文件路径报错问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-07-07
  • vue3中el-uplod结合ts实现图片粘贴上传

    vue3中el-uplod结合ts实现图片粘贴上传

    本文主要介绍了vue3中el-uplod结合ts实现图片粘贴上传,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2024-07-07
  • vue3.0透传属性和事件的使用方式举例

    vue3.0透传属性和事件的使用方式举例

    这篇文章主要给大家介绍了关于vue3.0透传属性和事件使用的相关资料,透传attribute指的是传递给一个组件,却没有被该组件声明为props或emits的attribute或者v-on事件监听器,需要的朋友可以参考下
    2024-01-01
  • 解决Antd中Form表单的onChange事件中执行setFieldsValue不生效

    解决Antd中Form表单的onChange事件中执行setFieldsValue不生效

    这篇文章主要介绍了解决Antd中Form表单的onChange事件中执行setFieldsValue不生效问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-03-03
  • 使用vue-router设置每个页面的title方法

    使用vue-router设置每个页面的title方法

    下面小编就为大家分享一篇使用vue-router设置每个页面的title方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • vue实战中的一些实用小魔法汇总

    vue实战中的一些实用小魔法汇总

    这篇文章主要给大家介绍了关于vue实战中一些实用小魔法的相关资料,这些技巧和窍门,可以帮助你成为更好的Vue开发人员,需要的朋友可以参考下
    2021-06-06
  • Vue3中watch监听对象的属性值(监听源必须是一个getter函数)

    Vue3中watch监听对象的属性值(监听源必须是一个getter函数)

    这篇文章主要介绍了Vue3中watch监听对象的属性值,监听源必须是一个getter函数,本文结合示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-12-12
  • vue使用自定义icon图标的方法

    vue使用自定义icon图标的方法

    这篇文章主要介绍了vue使用自定义的icon图标的方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-05-05
  • vue请求服务器数据后绑定不上的解决方法

    vue请求服务器数据后绑定不上的解决方法

    今天小编就为大家分享一篇vue请求服务器数据后绑定不上的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10

最新评论