版權(quán)聲明：本文原創(chuàng)，轉(zhuǎn)載請(qǐng)注明出處 http://www.itdecent.cn/p/f5d5bdde00a7

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

IE 瀏覽器真是不合群又不懂事，讓無數(shù)開發(fā)者操碎了心啊···
本文會(huì)持續(xù)補(bǔ)充遇到的相關(guān)IE兼容問題和解決方案?。嫒?gt;=IE9）

背景

生產(chǎn)環(huán)境
vue 2.5.10 index.html中以cdn方式引入
axios 0.18.0

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

安裝依賴

npm install babel-polyfill --save-dev

在 webpack.base.conf.js 中按照以下內(nèi)容修改

module.exports = {
  ...
  entry: {
    app: ['babel-polyfill', './src/main.js']
  }
}

在入口文件 main.js 引入
我其實(shí)沒有引入，babel-polyfill 仍然生效了，你們可以試試；

import "babel-polyfill"

2. IE 瀏覽器 POST 請(qǐng)求沒反應(yīng)

安裝依賴

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

在入口文件 main.js 引入

import 'url-search-params-polyfill'

3. IE9 請(qǐng)求報(bào)錯(cuò) “拒絕訪問”

雖然服務(wù)器那邊已經(jīng)設(shè)置了Access-Control-Allow-Origin: *;，查閱資料發(fā)現(xiàn) ie8/9 不支持cors跨域方案，具體參考這里
方法一（不切實(shí)際）
設(shè)置瀏覽器安全屬性，啟用【通過域訪問數(shù)據(jù)源】選項(xiàng)；但肯定不能要求用戶去設(shè)置啊...

通過域訪問數(shù)據(jù)源

module.exports = {
  dev: {
    ...
    proxyTable: {
      '/api':{
        target: 'https://www.domain.com/api',  // 后臺(tái)api地址
        changeOrigin: true,
        pathRewrite: {
          '/api': ''
        }
      }
    }
  }
}

這里注意 config/dev.env.js 中如果配置了請(qǐng)求URL的 BASE_API ，這個(gè)值也應(yīng)該換成 /api；

4. IE 瀏覽器 GET 請(qǐng)求緩存的問題

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

方法一
設(shè)置請(qǐng)求頭，禁止緩存

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

方法二
get請(qǐng)求的參數(shù)中增加時(shí)間戳或是隨機(jī)數(shù)

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