vue-cli2 兼容 IE 浏览器的不完全踩坑之旅

版权声明：本文原创，转载请注明出处 https://www.jianshu.com/p/f5d5bdde00a7

vue-cli3 兼容 IE 浏览器的不完全踩坑之旅

IE 浏览器真是不合群又不懂事，让无数开发者操碎了心啊···
本文会持续补充遇到的相关IE兼容问题和解决方案！（兼容>=IE9）

背景

生产环境
vue 2.5.10 index.html中以cdn方式引入
axios 0.18.0

1. 老生常谈的 ES6 语法兼容（通常表现为页面空白） —— babel-polyfill

安装依赖

npm install babel-polyfill --save-dev

在 webpack.base.conf.js 中按照以下内容修改

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

在入口文件 main.js 引入
我其实没有引入，babel-polyfill 仍然生效了，你们可以试试；

import "babel-polyfill"

2. IE 浏览器 POST 请求没反应

安装依赖

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

在入口文件 main.js 引入

import 'url-search-params-polyfill'

3. IE9 请求报错 “拒绝访问”

虽然服务器那边已经设置了Access-Control-Allow-Origin: *;，查阅资料发现 ie8/9 不支持cors跨域方案，具体参考这里
方法一（不切实际）
设置浏览器安全属性，启用【通过域访问数据源】选项；但肯定不能要求用户去设置啊...

通过域访问数据源
方法二
服务器设置反向代理，但没有尝试，不好意思..
或者：
判断浏览器是IE9的话，api发送请求到本域，本域将请求转发至目标服务器
其他
参考这里
开发环境的解决方法
如果是开发环境的话，就给webpack配置代理就可以解决跨域；
在 config/index.js 添加如下：

module.exports = {
  dev: {
    ...
    proxyTable: {
      '/api':{
        target: 'https://www.domain.com/api',  // 后台api地址
        changeOrigin: true,
        pathRewrite: {
          '/api': ''
        }
      }
    }
  }
}

这里注意 config/dev.env.js 中如果配置了请求URL的 BASE_API ，这个值也应该换成 /api；

4. 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()
      }
    }
  }
)