❝

今年年初加入了物資團隊，遇到的第一個問題就是解決IE的兼容性問題。

❞

1 現象

當時的情況是IE瀏覽器在登錄系統時，登錄頁無法加載，頁面顯示空白，所以也無法訪問系統裏的其他頁面。

2 查看報錯

在IE瀏覽器中輸入系統網址，打開控制枱，發現有這樣的報錯：SCRIPT1003: 缺少 ':' 第一個想法就是需要對webpack進行一些兼容性配置，於是小編低下頭默默的先進行了一通通用配置操作。

3 進行通用兼容性配置

由於本系統前端框架用到的腳手架是3.x版本，因此得針對cli3來進行配置。

3.1 對vue.config.js文件進行檢查

3.2 引入polyfill

cnpm install es6-promise –D

3.3 配置presets

打開babel.config.js文件，將presets進行如下設置：

// vuecli3 不需要配置transform-vue-jsx
presets: [
  [
    '@vue/app',
    {
      useBuiltIns: 'entry',
      polyfills: ['es6.promise', 'es6.symbol']
    }
  ]
],
plugins: ['lodash', 'jsx-v-model']
}

3.4 入口文件的配置

打開main.js文件，將3.1安裝的polyfill進行引入：

import Es6Promise from 'es6-promise'
Es6Promise.polyfill()

4 進行第三方庫的排查

進行通用配置之後，仍然報錯，這時候就可以確定剩下的原因是由於第三方插件引起的，需要在package.json文件中查看引入了哪些第三方庫。

將可能會有兼容性問題的庫引入到vue.config.js文件下的transpileDependencies集合中，經排查，將以下兩個庫補充進集合中：

  transpileDependencies: [
    'vue-echarts',
    'resize-detector',
    'v-contextmenu',
    'vue-runtime-helpers'
  ]

5 測試

配置完成後，重新啓動項目進行驗證，這時候發現可以成功登錄系統並進入首頁。

到此為止這個問題也就解決了，可以順利加載出登錄頁面，並且成功登進了系統。

順利解決，喜大普奔hē hē hē hē。

關於作者：JeremyCC

一個愛唱歌的前端工程獅，喜歡我可以點關注噢！（頭像僅供參考，哈哈）