This website requires JavaScript.

vue cli3 搭建项目浏览器兼容性问题

2019.10.19 03:50字数 2897阅读 56喜欢 0评论 0

本文主要记录IE环境下的兼容性问题,IE环境,IE环境... 本文兼容到IE10+

1、js 报错

有时我们会听到,项目在Chrome,ff都非常完美的运行,但是到IE下就报错,我们整理下来发现,大部分错误都是语法错误,像这样(报错一)

或者这样(报错二)

让我们来看看都是什么导致的,一般线上的代码是不会开启sourceMap的,因为那会使我们的代码跟裸奔没什么区别

针对报错我们可以有几种定位错误的方式

1.1、方式一,比较笨的方式, 以(报错一)为例,利用Chrome浏览器,打开相同文件,去找到报错的位置,109行,22982列

这个就很明显了,使用了 `${}` ,这是ES6的语法,IE系列不支持

拷贝项目中搜索,发现是node_modules 里一个依赖用到了,一般我们 build 的时候是不会重新编译node_modules中的文件的,所以直接原样打包到chunk中了,打开这个包发现算上空行一共15行代码,就是利用btoa,atob对一段字符串进行base64编码,我的做法就是把代码本地化了,也就是直接放到本地utils中作为一个工具函数使用,这样重新编译就解决了(报错一)

有时候会发现引入的源码就是非常简单的实现,可以试着先去写一下

1.2、方式二,针对(报错二)我们同样先利用Chrome找到描述报错的位置查看同样的方式查看源码

发现有一处ES6方式的默认值赋值,原因知道了,但代码是混淆压缩的,十分不利于排查问题,我们的项目比较大,sourceMap一打开就会内存溢出(还未找到原因,这个另一个话题再说,此处当成有没有办法拿到sourceMap),我们可以在vue.config.js中将混淆压缩关闭,重新打包,webpack4.X 内置了混淆压缩的配置项,直接在vue.config.js中修改就行

configureWebpack: {
    optimization: {
        minimize: false
    }
}

找到重新报错的同名文件,

node_modules搜索关键字

代码较多,放弃本地化,vue.config.js中添加额外编译

 transpileDependencies: [
    'resize-detector'
  ],

问题解决

2、CSS异常

2.1、IE的icon没有显示出来

原因:iconfont兼容字体包未引用

解决:引用兼容其他浏览器字体包

延伸:项目建议全局引用统一项目icon

WOFF
WOFF是Web Open Font Format几个词的首字母简写。这种字体格式专门用于网上,由Mozilla联合其它几大组织共同开发。WOFF字体通常比其它字体加载的要快些,因为使用了OpenType (OTF)和TrueType (TTF)字体里的存储结构和压缩算法。这种字体格式还可以加入元信息和授权信息。这种字体格式有君临天下的趋势,因为所有的现代浏览器都开始支持这种字体格式。【支持的浏览器:IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】

SVG / SVGZ
Scalable Vector Graphics (Font). SVG是一种用矢量图格式改进的字体格式,体积上比矢量图更小,适合在手机设备上使用。【支持的浏览器:Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】

EOT
Embedded Open Type。这是微软创造的字体格式。这种格式只在IE6-IE8里使用。【支持的浏览器:IE4+】

OTF / TTF
OpenType Font 和 TrueType Font。部分的因为这种格式容易被复制(非法的),这才催生了WOFF字体格式。然而,OpenType有很多独特的地方,受到很多设计者的喜爱。【支持的浏览器:IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】

2.2、滚动条不统一,且难看

解决: 针对不同浏览器写兼容css

// 清除Chrome 滚动条
::-webkit-scrollbar {
  width: 0 !important;
}

// IE10+,FF
.scroll_content {
  scrollbar-width: none; // 设置滚动条宽度 兼容FF
  -ms-overflow-style: none; // 兼容IE
  overflow: auto;
}

-ms-overflow-style 值none的含义,引用自 MDN -ms-overflow-style

至此,目前已发现的问题解决了