關於Vue相容IE10

摘要： 因為Vue使用了ES6語法，而低版本IE瀏覽器不支援，解決方法是: 使用 babel-polyfill 轉換成ES5，具體辦法 這個方法只能支援到 IE9 ...

因為Vue使用了ES6語法，而低版本IE瀏覽器不支援，解決方法是:

使用 babel-polyfill 轉換成ES5，具體辦法

這個方法只能支援到 IE9 為止的 語法相容 ，關於樣式的相容需要另行處理

• 安裝@babel/polyfill

  $ npm install --save-dev babel/polyfill

• 在 packgae.json 中找到 browserslist 新增

  "browserslist": [
  "> 1%",
  "last 2 versions",
  "not ie <= 8",
  "ie 8"
  ]

• 在babel.config.js中新增

  module.exports = {
  presets: [
  ['@vue/app', {
  useBuiltIns: 'entry'
  }]
  ]
  }

• 在main.js中引入

  import '@babel/polyfill'

• 然後重啟專案，應該就可以正常顯示了。

這裡有兩個問題：一個是如果配置了多頁面的話，那麼在多頁面的js入口中都需要引入 import '@babel/polyfill' ；

第二個是，這裡只相容到了 IE10 ， element-ui 表現良好，如果需要相容到 IE9 也可以用這個辦法，但是 IE9 沒有 Flex 佈局所以 element-ui 在 IE9 下佈局樣式是完全崩潰的，解決辦法是使用 css3 的 calc() 函式