vue2.0兼容ie11(在ie11中无法进行页面跳转 白屏 三步搞定)

本文主要是介绍vue2.0兼容ie11(在ie11中无法进行页面跳转 白屏 三步搞定),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

对于Chrome浏览器没啥好说的,是目前对开发者最有好的浏览器,但是IE11就不干了,撂挑子了。经过多个浏览器的测试,发现就IE浏览器不行,连首屏都加载失败。

在本地启动项目后,然后打开IE的开发者控制台,会发现报了语法错误

在这里插入图片描述

然后告诉你是哪个文件的哪一行。点进去一看,没错,都是经过webpack编译压缩后的代码,看不懂

在这里插入图片描述

经过一系列的排查和定位,最终发现了问题。
这是因为webpack默认不会对node_modules中的插件进行转译,需要在vue.config.js中进行配置。该属性名叫:transpileDependencies,接收一个数组作为属性值,然后把node_modules中需要babel转译的插件名输入进去,就可以了。

module.exports = {...transpileDenpendencies: [ 'sockjs-client' ]
}

处理完上面的问题之后大多数情况下,问题就已经解决了,但是比较神奇的是有的时候还是不行,那是因为还有一个地方需要坐下修改,那就是.browserslistrc文件中的:not dead 改成:not ie < 11 或者在package.js里添加一个browserslist

"browserslist": ["> 1%","last 3 versions","not ie <= 8","chrome >= 14","safari >= 3","ios >= 8","android >= 4.0"]

他会配合@babel/preset-env和Autoprefixer用来确定需要转译的Javascript特性和需要添加的css浏览器前缀

除了上述的问题,还遇到了一个问题,那就是加密插件引起的:jsencrypt。引入的方式有两种:

  • import JSEncrypt from ‘jsencrypt’
  • import { JSEncrypt } from ‘jsencrypt’
    第一种方式IE不兼容,第二种IE是兼容的。

作者:知你故来风
链接:https://juejin.cn/post/7133184019570622500
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

附加

在对一个vue2+ts的项目中发现vue-property-decorator插件也是使用了非ES5语法导致IE11无法兼容。

其实上面的sockjs-client一般情况下只会在本地出现,因为本地启动的服务本质是启动的socket服务,而发布到线上的代码是经过打包后的代码,跟socketjs-client不发生关系,除非你项目中用到了webSocket

这篇关于vue2.0兼容ie11(在ie11中无法进行页面跳转 白屏 三步搞定)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/345104

相关文章

如何使用Lombok进行spring 注入

《如何使用Lombok进行spring注入》本文介绍如何用Lombok简化Spring注入,推荐优先使用setter注入,通过注解自动生成getter/setter及构造器,减少冗余代码,提升开发效... Lombok为了开发环境简化代码,好处不用多说。spring 注入方式为2种,构造器注入和setter

MySQL进行数据库审计的详细步骤和示例代码

《MySQL进行数据库审计的详细步骤和示例代码》数据库审计通过触发器、内置功能及第三方工具记录和监控数据库活动,确保安全、完整与合规,Java代码实现自动化日志记录,整合分析系统提升监控效率,本文给大... 目录一、数据库审计的基本概念二、使用触发器进行数据库审计1. 创建审计表2. 创建触发器三、Java

一文详解如何使用Java获取PDF页面信息

《一文详解如何使用Java获取PDF页面信息》了解PDF页面属性是我们在处理文档、内容提取、打印设置或页面重组等任务时不可或缺的一环,下面我们就来看看如何使用Java语言获取这些信息吧... 目录引言一、安装和引入PDF处理库引入依赖二、获取 PDF 页数三、获取页面尺寸(宽高)四、获取页面旋转角度五、判断

MySQL深分页进行性能优化的常见方法

《MySQL深分页进行性能优化的常见方法》在Web应用中,分页查询是数据库操作中的常见需求,然而,在面对大型数据集时,深分页(deeppagination)却成为了性能优化的一个挑战,在本文中,我们将... 目录引言:深分页,真的只是“翻页慢”那么简单吗?一、背景介绍二、深分页的性能问题三、业务场景分析四、

SpringBoot结合Docker进行容器化处理指南

《SpringBoot结合Docker进行容器化处理指南》在当今快速发展的软件工程领域,SpringBoot和Docker已经成为现代Java开发者的必备工具,本文将深入讲解如何将一个SpringBo... 目录前言一、为什么选择 Spring Bootjavascript + docker1. 快速部署与

linux解压缩 xxx.jar文件进行内部操作过程

《linux解压缩xxx.jar文件进行内部操作过程》:本文主要介绍linux解压缩xxx.jar文件进行内部操作,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、解压文件二、压缩文件总结一、解压文件1、把 xxx.jar 文件放在服务器上,并进入当前目录#

SpringBoot中如何使用Assert进行断言校验

《SpringBoot中如何使用Assert进行断言校验》Java提供了内置的assert机制,而Spring框架也提供了更强大的Assert工具类来帮助开发者进行参数校验和状态检查,下... 目录前言一、Java 原生assert简介1.1 使用方式1.2 示例代码1.3 优缺点分析二、Spring Fr

SQL Server配置管理器无法打开的四种解决方法

《SQLServer配置管理器无法打开的四种解决方法》本文总结了SQLServer配置管理器无法打开的四种解决方法,文中通过图文示例介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的... 目录方法一:桌面图标进入方法二:运行窗口进入检查版本号对照表php方法三:查找文件路径方法四:检查 S

Golang如何对cron进行二次封装实现指定时间执行定时任务

《Golang如何对cron进行二次封装实现指定时间执行定时任务》:本文主要介绍Golang如何对cron进行二次封装实现指定时间执行定时任务问题,具有很好的参考价值,希望对大家有所帮助,如有错误... 目录背景cron库下载代码示例【1】结构体定义【2】定时任务开启【3】使用示例【4】控制台输出总结背景

Python中Tensorflow无法调用GPU问题的解决方法

《Python中Tensorflow无法调用GPU问题的解决方法》文章详解如何解决TensorFlow在Windows无法识别GPU的问题,需降级至2.10版本,安装匹配CUDA11.2和cuDNN... 当用以下代码查看GPU数量时,gpuspython返回的是一个空列表,说明tensorflow没有找到