1 現象

當時的狀況是IE瀏覽器在登陸系統時，登陸頁沒法加載，頁面顯示空白，因此也沒法訪問系統裏的其餘頁面。vue

2 查看報錯

在IE瀏覽器中輸入系統網址，打開控制檯，發現有這樣的報錯：SCRIPT1003: 缺乏 ':'webpack

第一個想法就是須要對webpack進行一些兼容性配置，因而小編低下頭默默的先進行了一統統用配置操做。es6

3 進行通用兼容性配置

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

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

3.2 引入polyfill

cnpm install babel-polyfill –D
cnpm install es6-promise –D 複製代碼

3.3 配置presets

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

module.exports = {
// 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進行引入：json

import '@babel/polyfill'
import Es6Promise from 'es6-promise' Es6Promise.polyfill() 複製代碼

4 進行第三方庫的排查

進行通用配置以後，仍然報錯，這時候就能夠肯定剩下的緣由是因爲第三方插件引發的，須要在package.json文件中查看引入了哪些第三方庫。promise

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

vueConfigs = {
 transpileDependencies: [  'vue-echarts',  'resize-detector',  'v-contextmenu',  'vue-runtime-helpers'  ]  複製代碼

5 測試

配置完成後，從新啓動項目進行驗證，這時候發現能夠成功登陸系統並進入首頁。ruby

到此爲止這個問題也就解決了，能夠順利加載出登陸頁面，而且成功登進了系統。

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

關於做者：JeremyCC

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

本文使用 mdnice 排版