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

版权声明：本文原创，转载请注明出处 https://www.jianshu.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的原因，解决方案整理中

未完待续...