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>