IE兼容vue解决方案

IE兼容

在 ie9 的环境上，es6 的部分新对象、表达式，并不支持，解决方案是使用 babel-polyfill 组件，它可以将 es6 的代码翻译成低版本浏览器可以识别的 es5 代码,运行以下代码安装babel-polyfill组件

npm install babel-polyfill -S

安装完成后，在项目的主入口文件 main.js 的首行直接引用

即使在使用 babel-polyfill 做代码翻译后，发现还是有一些 es6 的新特性并没有解决，比如说 Number 对象的 parseInt 和 parseFloat 方法

es6 将全局方法 parseInt() 和 parseFloat() ，移植到 Number 对象上面，行为完全保持不变。这样做的目的，是逐步减少全局性方法，使得语言逐步模块化。

解决这个问题不需要引入包来解决，同样在项目主入口文件 main.js 加入以下代码（代码尽可能靠前，最好是在引用 babel-polyfill 之后 ）

当然，如果你只用到了 axios 对 promise进行兼容，可以只用 es6-promise,并在main.js中引用es6-promise/auto

npm install es6-promise -S

main.js文件代码示例

// 兼容IE
import 'babel-polyfill';
if (Number.parseInt === undefined) Number.parseInt = window.parseInt;
if (Number.parseFloat === undefined) Number.parseFloat = window.parseFloat;
import 'es6-promise/auto'

import Vue from 'vue'
import App from '@/App'
import router from '@/router'                 // api: https://github.com/vuejs/vue-router
import store from '@/store'                   // api: https://github.com/vuejs/vuex
import VueCookie from 'vue-cookie'  

在项目使用 vue-cli 生成的代码中，根目录有一个 .babelrc 文件，这是项目使用 babel 的配置文件。在默认生成的模板内容中，增加 "useBuiltIns": "entry" 的设置内容，这是一个指定哪些内容需要被 polyfill(兼容) 的设置

useBuiltIns 有三个设置选项

• false - 不做任何操作

• entry - 根据浏览器版本的支持，将 polyfill 需求拆分引入，仅引入有浏览器不支持的polyfill

• usage - 检测代码中 ES6/7/8 等的使用情况，仅仅加载代码中用到的 polyfill

  .babelrc文件代码示例

  {
    "presets": [
      ["env", {
        "modules": false,
        "useBuiltIns": "entry",
        "targets": {
          "browsers": [
            "> 1%",
            "last 2 versions",
            "not ie <= 8"
          ]
        }
  
      }],
      "stage-2"
    ],
    "plugins": ["transform-runtime","transform-vue-jsx", ["component", [
      {
        "libraryName": "element-ui"
      }
    ]]],
    "env": {
      "test": {
        "presets": ["env", "stage-2"],
        "plugins": ["transform-es2015-modules-commonjs", "dynamic-import-node"]
      }
    }
  }
  

修正不规范的的代码

• 重复的属性,IE会报一个错误 “strict 模式下不允许一个属性有多个定义”:

• 错误的css代码会导致IE白屏,且没有报错信息

  例1.元素有两个style属性

   <div style="" class="header_user_t1 ub-ac" style="cursor: auto">
  </div>
  

  例2.vue组件有重复的属性,本例中为border属性重复

  <el-table :data="tableData" border :border="false" style="width: 100%;">
  </el-table>
  

  例3.错误的css语法

   <div style="border:box-sizing:border-box;paddig-bottom:10px;">
   </div>