vue iview 浏览器兼容问题(支持IE9)

支持到IE9

如果遇到问题, 可以给我留言. 说明具体的问题.

js

我们根据浏览器的用户代理字符串, 来区别出是哪种浏览器的哪个版本.
然后, 我们就要根据版本来进行兼容了.

vue 浏览器兼容 中说明了一些兼容性的处理.
但是, 真正做起来还有一些不明确的地方.

我在下面的文章中, 做了一些我自己的说明.

下面是可能你需要安装的npm包

# 兼容iview
npm install -D babel-loader @babel/core @babel/preset-env webpack
# 兼容IE
npm install --save core-js

转义ES6语法和polyfill

ES6语法, 可以通过babel来自动转换成ES5.
在vue-cli3 创建的项目已经包括了babel.

其中有babel-preset-env, 可以根据browserslist来智能地进行转义和提供polyfill

不过需要你安装一下core-js

npm install --save core-js

vue的项目可以设置一下 package.json的 browserslist

{
   
"browserslist": [
    "> 0.1%",
    "last 3 versions",
    "not ie <= 8"
  ],
}

在 .babelrc 文件中改为

{
   
  "presets": [
    [
      "@vue/app",
      {
   
        "useBuiltIns": "entry"
      }
    ]
  ]
}

通过下面的命令可以看到支持的浏览器清单

# 查询支持的浏览器
npx browserslist

要在入口文件中加入

// 为了兼容IE9
import 'core-js/stable'
import 'regenerator-runtime/runtime'
// 这个方法里包含了一些对IE的特殊处理, 具体代码见下面
import compat_ie from '@/libs/ie.js'

compat_ie()

兼容IE9, 我写到一个compat_ie.js

/* eslint-disable */
export default function compat_ie() {
   
  /**
*作用：兼容dataset
*问题：[Vue warn]: Error in directive transfer-dom inserted hook: "TypeError: 无法获取未定义或 null 引用的属性“transfer”"
*说明：ie10及以下不支持dataset，以下代码处理兼容
* */
  if (window.HTMLElement) {
   
    if (Object.getOwnPropertyNames(HTMLElement.prototype).indexOf('dataset') === -1) {
   
      Object.defineProperty(HTMLElement.prototype, 'dataset', {
   
        get: function () {
   
          var attributes = this.attributes; // 获取节点的所有属性
          var name = [];
          var value = []; // 定义两个数组保存属性名和属性值
          var obj = {
   }; // 定义一个空对象
          for (var i = 0; i