Vue使用babel-polyfill兼容IE解决白屏及语法报错

2023-11-17

解决vue elementUI项目使用webpack打包上线后,服务器环境下IE报语法错误及白屏问题

在最近的项目中,在使用webpack打包后发布,有用户反馈使用IE浏览器访问会白屏,这就不能忍受了,经过排查发现,发生这个错误应该是有文件没有由ES6转ES5语法造成,而IE不兼容该语法
既然问题找到了,那解决起来应该就容易了,然后事实上并没有我想的那么简单,话不多说,直接开始。
首先,通用的方式就是,项目中引入babel-polyfill,安装方法可以自行百度,在这里我直接上命令:

npm i --save babel-polyfill (或者使用如果安装有cnpm就用cnpm)

第一步:引入babel-polyfill

引入babel-polyfill的方式无非有以下几种
1.在main.js的顶部直接使用 import ‘babel-polyfill’
2.在vue.config.js中,直接在chainWebpack内添加以下代码,只需要引入一处即可

chainWebpack: config => {
    config.entry('main').add('babel-polyfill')
    config.entry.app = ['babel-polyfill', './src/main.js']
  }

第二步:在babel.config.js中设置entry

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

第三步:如果除了项目还引入了其他插件而该插件内部也存在ES6写法,则需要将这些插件的ES6转换成ES5,使用transpileDependencies直接将需要转换的插件放入

  transpileDependencies: ['element-ui', 'echarts', 'highcharts', 'highcharts-3d', 'screenfull', 'oidc-client', 'vuex-oidc']

VUE CLI官方文档中对transpileDependencies的解释是,默认情况下 babel-loader 会忽略所有 node_modules 中的文件。如果你想要通过 Babel 显式转译一个依赖,可以在这个选项中列出来,他接受字符串或者正则表达式

https://cli.vuejs.org/zh/config/#transpiledependencies
在这里插入图片描述
如果引入的包比较多,可以根据package.json中引入包慢慢调试,直到将所有存在ES6语法的插件全部换成ES5

在开发的过程中遇到过一个问题,就是,如果使用cnpm安装依赖,有可能会导致transpiledependencies无效,具体原因还没有去深究,不过我的做法是,直接将node_modules全部删掉后,重新使用npm i安装所有依赖后,再次重新打包,目前问题已解决

仅供参考,有问题欢迎指出

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Vue使用babel-polyfill兼容IE解决白屏及语法报错 的相关文章

  • 使用 React.lazy 时未捕获未定义的错误

    我正在尝试实施基于路由的代码分割 https reactjs org docs code splitting html route based code splitting正如 React 文档中提到的 这是添加延迟实现之前我的应用程序 这
  • 非 DOM 对象上的 jQuery 自定义事件

    我最近阅读了一些代码 其功能如下 bob name Bob Smith rank 7 bob bind nameChanged function bob trigger nameChanged 这似乎有效 但我在 jQuery 文档或源代码
  • 如何使用 jest 模拟第三方库

    我正在开发一个node js应用程序使用nestjs我有一堂课叫LoggerService如下 export class LoggerService private logger Rollbar constructor this logge
  • 使用 CryptoJS 更改密钥 [重复]

    这个问题在这里已经有答案了 我正在使用 CryptoJS 来加密和解密文本 在这里 我只是获取消息并显示加密和解密消息 我使用DES算法进行加密和解密 这是我的 HTML 文件
  • 仅一页 JavaScript 应用程序

    您是否尝试过单页 Web 应用程序 即浏览器仅从服务器 获取 一页 其余部分由客户端 JavaScript 代码处理 此类 应用程序页面 的一个很好的例子是 Gmail 对于更简单的应用程序 例如博客和 CMS 使用这种方法有哪些优点和缺点
  • 如何使用 JavaScript 获取没有 HTML 元素的纯文本?

    我的 HTML 中有 1 按钮和一些文本 如下所示 function get content I don t know how to do in here
  • 如何检查请求是否通过 Express 中的 https 发送

    我想强制某些路线始终在我的 Express 应用程序中使用安全连接 我如何检查以确保它使用 https 我在 heroku 上使用搭载 ssl 进行部署 我也在 Heroku 上部署 当他们使用 nginx 进行反向代理时 他们添加了一堆标
  • 在 angular2 中过滤数组

    我正在研究如何在 Angular2 中过滤数据数组 我研究过使用自定义管道 但我觉得这不是我想要的 因为它似乎更适合简单的表示转换 而不是过滤大量数据 数组排列如下 getLogs Array
  • JavaScript 中数组的 HTML 数据列表值

    我有一个简单的程序 它必须从服务器上的文本文件中获取值 然后将数据列表填充为输入文本字段中的选择 为此 我想要采取的第一步是我想知道如何动态地将 JavaScript 数组用作数据列表选项 我的代码是
  • Cloudfoundry:如何组合两个运行时

    cloundfoundry 有没有办法结合两个运行时环境 我正在将 NodeJS 应用程序部署到 IBM Bluemix 现在 我还希望能够执行独立的 jar 文件 但应用程序失败 APP 0 bin sh 1 java not found
  • 如何流式传输 OpenAI 的完成 API?

    我想流式传输结果通过 OpenAI 的 API 完成 https beta openai com docs api reference completions 该文档提到使用服务器发送的事件 https developer mozilla
  • Typeahead.js substringMatcher 函数说明

    我只是在做一些研究Typeahead js这是一个非常酷的图书馆 感谢文档 我已经成功地获得了一个基本的示例 该文档也非常好 但是我试图弄清楚以下代码块实际上在做什么 var substringMatcher function strs r
  • 使用 JS 合并具有相同值的相邻 HTML 表格单元格

    我已经为此苦苦挣扎了一段时间 我有一个根据一些 JSON 数据自动生成的表 该数据可能会有所不同 我想合并第一列中具有相同值的相邻单元格 例如此表中的 鱼 和 鸟 table tr td fish td td salmon td tr tr
  • IE11不监听MSFullscreenChange事件

    我正在尝试使用 Bigscreen js 在 IE11 中使用全屏 但 IE11 不监听 MS FullscreenChange 事件 document addEventListener MSFullscreenChange functio
  • vue-test-utils:如何测试 Mounted() 生命周期挂钩中的逻辑(使用 vuex)?

    我正在尝试为 Vue 中的逻辑编写一个单元测试mounted 生命周期钩子 但运气不太好 问题似乎是这样的mounted 使用 vue test utils 安装组件时永远不会被调用mount 这是我要测试的 Vue 组件
  • 为什么“tbody”不设置表格的背景颜色?

    我在用 tbody 作为 CSS 选择器来设置background color在一个表中 我这样做是因为我有多个 tbody 表内的部分 它们具有不同的背景颜色 我的问题是 当使用border radius在细胞上 细胞不尊重backgro
  • 如何在 javascript 正则表达式中匹配平衡分隔符?

    我原以为这个问题是不可能的 据我所知 Javascript 的正则表达式既没有递归插值 也没有漂亮的 NET 平衡组功能 但问题就在那里 如问题 12 所示正则表达式 alf nu http regex alf nu 匹配平衡对 lt an
  • 需要有关 React Js 的帮助

    我是 React Js 新手 我的代码无法正常工作 请看下面 这是我的脚本文件Main jsx 该文件由 React 编译 输出放置在 dist 文件夹下的 main js 文件中 var react require react react
  • 如何在 gulp.src 中使用基本正则表达式?

    我正在尝试选择两个文件gulp src highcharts js and highcharts src js 当然 我知道我可以使用数组表达式显式添加这两个表达式 但出于学习目的 我尝试为它们编写一个表达式 我读过可以使用简单的正则表达式
  • KeyboardAvoidingView - 隐藏键盘时重置高度

    我正在使用 React NativeKeyboardAvoidingView设置我的高度View当显示键盘时 但是当我关闭应用程序中的键盘时 视图的高度不会变回原来的值

随机推荐

  • sudo: unable to resolve host [hostname](已解决)

    在阿里云服务器上安装Java时报错 于是修改文件 etc hosts解决 PS 此时sudo依然可以继续运行 etc hosts原文件如下 127 0 0 1 localhost The following lines are desira
  • MySQL数据库——DDL基本操作

    文章目录 前言 数据库操作 查看已存在的所有数据库 创建数据库 选中数据库 删除数据库 修改数据库编码 表操作 创建表 显示创建表时的语句 显示表结构 删除表 修改表的结构 增加列 修改列 删除列 修改表名 前言 DDL 操作是与数据库结构
  • Makefile执行报错——CONFIG_X86_X32 enabled but no binutils support

    错误描述 在学习Linux驱动的时候 编写完一个demo 执行make的时候 报了如标题所示的错误 使用的makefile如下 KERNELDIR lib modules uname r build hello world objs hel
  • ESP8266_MQTT协议

    1 了解下MQTT协议 虽然上一篇用起来了MQTT 但是并不十分了解 基本就局限于 发布主题是发送数据 订阅主题是接收数据 今天就再好好了解一下吧 分享下网页版的 MQTT协议中文版 链接 Introduction MQTT协议中文版 1
  • HTTP 字体跨域问题

    一 背景介绍 最近在做公用菜单时 由于除了提供给子应用系统html代码外还需要提供样式 脚本 样式中涉及到了字体 跨域的情况下 样式脚本都可以正常访问 但是字体访问就会出现跨域问题了 二 问题描述 问 什么是字体跨域 答 就是你所引用css
  • unity和VS2019联调问题解决

    以前使用VS2015和17的时候联调的时候是可以附加到unity进行联调的 今天用的2019发现不可以了 研究了一下是少装了一个插件 装上插件就解决了 过程如下 当前使用VS版本2019企业版 如图 更多内容请关注微信公众号 unity风雨
  • 《Android面试题及解析》分享,一文带你搞懂Android多线程Handler

    网易游戏 严格来说我投的是网易互娱 区别于雷火 盘古 后面再说更多区别 走的内推 网易游戏以其笔试难度大著名 这次也不例外 所有的内推都要求参加统一笔试 我记得笔试有几场 我是在第一场 内推的岗位是网易游戏最核心的 游戏研发工程师 地点是杭
  • Call to localhost/127.0.0.1:9000 failed on connection exception错误。

    解决方案 1 首先查看hdfs site xml配置文件 如下面所示
  • nginx+tomcat实现代理访问java web项目

    最近由于部署考试系统 遇到一系列问题 由于Ubuntu上软件安装的混乱 参考的博客过于坑爹 所以环境配置的乱七八糟 在一个午夜 把一根烟抽的透透的 然后开始重装了一次系统 使用的Ubuntu 16 04LTS 由于时间原因一直没有吧我的这个
  • 用acme.sh申请免费ssl证书-let‘s encrypt

    这个是申请泛域名证书 移动端和电脑端直接用这个就可以了 不需要分开申请 安装脚本 curl https get acme sh sh 进入 cd acme sh 看下目录有什么 root csdn ls adl acme sh drwx 8
  • CO_XT_COMPONENTS_DELETE 删除工单组件

    REPORT zdtest6 判断是否有原始组件 如有全删 DATA ls return TYPE coxt bapireturn DATA lt resbkeys TYPE coxt t resbdel lt return TYPE ST
  • RabbitMQ--扩展--03--日志文件,故障恢复,集群迁移,集群监控

    RabbitMQ 扩展 03 日志文件 故障恢复 集群迁移 集群监控 1 RabbitMQ日志查看 如果在使用RabbitMQ 的过程中出现了异常情况 通过查看RabbitMQ 的服务日志可以让你在处理异常的过程中事半功倍 RabbitMQ
  • python基础—字符串操作

    1 字符串 Python内置了一系列的数据类型 其中最主要的内置类型是数值类型 文本序列 字符串 类型 序列 列表 元组和range 类型 集合类型 映射 字典 类型 本章在介绍字符串 列表 元组和range类型共有的通用序列操作方法的基础
  • 常用的相似度计算方法原理及实现

    在数据分析和数据挖掘以及搜索引擎中 我们经常需要知道个体间差异的大小 进而评价个体的相似性和类别 常见的比如数据分析中比如相关分析 数据挖掘中的分类聚类 K Means等 算法 搜索引擎进行物品推荐时 相似度就是比较两个事物的相似性 一般通
  • 笔记本计算机bios设置,联想笔记本BIOS设置详解

    大部分用户朋友遇到系统损坏时 不得不选择重装系统这样简单粗暴快的方式来解决 然而在准备重装时却遇到BIOS设置难题 不得不求助网络上各路大神 却还是没能真正得到帮助 下面快启动小编为大家分享联想笔记本BIOS设置详解 希望能为大家排忧解难
  • 一些杂七杂八的概率统计基础(变分推断所需)

    在开始之前要了解以下这个统计学中背景知识 贝叶斯学派与频率学派 极大似然估计学派 最大的区别就是 贝叶斯学派认为参数 不是一个确定值 而是一个随机变量 且随机变量一定是服从某个分布的 在概率统计中 随机变量 随机数量 变量中的值是随机现象的
  • 莫烦强化学习视频笔记:第五节 5.2 Policy Gradients 算法更新和思维决策

    目录 1 要点 2 算法流程 3 算法代码形式 3 1 算法更新 3 2 思维决策 3 2 1 初始化 3 2 2 建立 Policy 神经网络 3 2 3 选行为 3 2 4 存储回合 3 2 5 学习 1 要点 Policy gradi
  • linux vim/vi 跳转到最后一行 跳转快捷键

    vim vi操作 跳到文本的最后一行 按 G 即 shift g 跳到文本的第一行的第一个字符 按两次 g 跳到当前行的最后一个字符 在当前行按 键 即 shift 4 跳到当前行的第一个字符 在当前行按 0
  • 《数字图像处理》笔记

    目录 第1章 绪论 1 1 图像概述 1 1 1 基本概念和术语 1 1 2 不同波段的图像示例 1 1 3 不同类型的图像示例 1 2 图像工程概述 1 2 1 图像工程的三个层次 1 3 图像表示和显示 1 3 1图像和像素的表示 1
  • Vue使用babel-polyfill兼容IE解决白屏及语法报错

    解决vue elementUI项目使用webpack打包上线后 服务器环境下IE报语法错误及白屏问题 在最近的项目中 在使用webpack打包后发布 有用户反馈使用IE浏览器访问会白屏 这就不能忍受了 经过排查发现 发生这个错误应该是有文件