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

Posted 2021-09-16 Mrchangchang

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

//错误姿势, 内样式不会被编译
<template>
<div>
<my-component style="color: #333"></my-component>
</div>
</template>
//正确姿势，使用class
<template>
<div>
<my-component class="text3"></my-component>
</div>
</template>

使用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/vueCompone...
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修饰符

<input v-model.trim="value"/>