vue + ant-design-vue 项目兼容IE11浏览器（血泪踩坑）

vue-cli启动项目登录成功后提示未登录

解决方法：本地服务启动访问域名localhost时，ie11不支持在localhost写入cookie，须使用ip地址。不要忘记在代理设置中cookieDomainRewrite配置为ip地址，关闭之前打开的页签重试。

页面报错`findIndex is not a function`

es6API不存在,需要加上polyfill

解决方法：webpack打包入口加上babel-polyfill或@babel/polyfill,如下

entry: {
app: ['babel-polyfill', './src/main.js']
}
// vue-cli4写法
module.exports = {
chainWebpack(config) {
config.entry('main').add('@babel/polyfill')
}
}

第三库语法报错

经过排查，vue-cli的babel-loader默认会忽略node_modeules里面的文件，引入库的代码存在es6语法。

解决方法：在vue.config.js增加transpileDependencies配置

module.exports = {
transpileDependencies: ['xx']
}

增删改操作后，请求数据显示来自缓存

解决方法：判断是否为IE浏览器，拦截请求请求参数带上时间戳

// axios
// 判断是否为ie11
const isIE = navigator.userAgent.indexOf('Trident') > -1 && navigator.userAgent.indexOf('rv:11.0') > -1
// request 拦截
axiosX.interceptors.request.use(
config => {
if (isIE && config.method.toLocaleLowerCase() === 'get') {
config.params = Object.assign({}, config.params, {t: Date.now()})
}
return config
},
err => {
return Promise.reject(err)
}
)

new Date()提示invalid date

解决方法： new Date()参数中-替换为/

vue自定义组件在父组件中使用，内样式无效

解决方法：在父组件中不要加内样式，使用class

//错误姿势, 内样式不会被编译
//正确姿势，使用class

使用ant-design-vue中input-number开发环境正常，打包后不生效，点击步进器报错

解决方法：使用input-number组件，加上step 参数

使用 ant-design-vue中steps组件开发环境正常，步骤序号为NaN

解决方法：使用step组件，加上initial参数

下载文件请求参数中有中文，控制台中文参数显示为乱码，请求报错

解决方法：中文参数使用encodeURIComponent API编码中文参数

使用ant-design-vue总input、TextArea点击清除icon不生效

input, textarea标签在maxLEngth属性设置为-1在IE中会无法粘贴

解决方法：入口文件增加如下代码

// mian.js
import Vue from 'vue'
import Antd, {Input} from 'ant-design-vue'
// IE11环境下Input组件清空异常 https://github.com/vueComponent/ant-design-vue/issues/2592
Vue.use(Antd)
if (!!window.ActiveXObject || 'ActiveXObject' in window) {
Input.methods.handleReset = function() {
this.stateValue = ''
this.$emit('change.value', '')
}

Input.TextArea.methods.handleReset = function () {
this.stateValue = ''
this.$emit('change.value', '')
}
}

在IE浏览器中复制会在后面加上一个空格

解决方法：在input中加上trim修饰符

Gridea