版權聲明：本文原創，轉載請注明出處 http://www.lxweimin.com/p/a778e91ed412

vue-cli2 兼容 IE 瀏覽器的不完全踩坑之旅

IE 瀏覽器真是不合群又不懂事，讓無數開發者操碎了心啊···
本文會持續補充遇到的相關IE兼容問題和解決方案！（兼容>=IE9）

背景

生產環境
vue 2.6.10 index.html中以cdn方式引入
axios 0.18.0

1. 老生常談的 ES6 語法兼容（通常表現為頁面空白） —— babel-polyfill

安裝依賴

npm install babel-polyfill --save-dev

在入口文件 main.js 引入

import '@babel/polyfill'

在 babel.config.js 中按照以下內容修改

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

2. IE 瀏覽器 POST 請求URLSearchParams未定義的問題

安裝依賴

npm install url-search-params-polyfill --save

在入口文件 main.js 引入

import 'url-search-params-polyfill'

發送不了請求也可能和axios版本過低有關系，本文使用的 axios 版本 0.18.0;

3. IE 瀏覽器 GET 請求緩存的問題

我說我明明剛添加完一項數據，為什么再打開頁面刷新的時候沒有呢？？
都是ie這不合群的瀏覽器緩存get請求搞的鬼！
現提供兩種我已經測試過的方法；
以下兩種方法都是在封裝axios請求攔截器中修改；

方法一
設置請求頭，禁止緩存

const service = axios.create({
  headers: {
     'Cache-Control': 'no-cache',
     'Pragma': 'no-cache'
   } 
})

方法二
get請求的參數中增加時間戳或是隨機數

service.interceptors.request.use(
  config => {
    if (config.method === 'get') {
      config.params = {
        ...config.params,
        _t: new Date().getTime()
      }
    }
  }
)

4. IE9 請求報錯"拒絕訪問"，跨域問題

和vue-cli2 兼容 IE
)一樣

5. IE9 el-input v-model 不能響應退格鍵

有一個項目使用了 element-ui ，其中有一個場景是表單驗證修改一個信息，發現 v-model 不能響應退格鍵，不知道是ele原因還是vue的原因，解決方案整理中

未完待續...