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

Posted Mrchangchang

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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

//错误姿势, 内样式不会被编译
<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"/>

以上是关于vue + ant-design-vue 项目兼容IE11浏览器(血泪踩坑)的主要内容,如果未能解决你的问题,请参考以下文章

第一个 Vue + Ant-Design-Vue 小项目跑起来

ant-design-vue 框架搭建(一)

如何修改ant-design-vue中的样式问题

vue按需引入ant-design-vue报错解决方案

使用ant-design-vue开发换肤功能

推荐一款ant-design-vue 快速入门教程