Vue項目下IE報錯 SCRIPT1003: 缺乏 ':'，致使頁面空白的解決方案

❝

今年年初加入了物資團隊，遇到的第一個問題就是解決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

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