在之前的文章中说过一些关于兼容IE的方法,今天把关于在使用vue全家桶在开发中遇到的IE的的兼容问题汇总了一下。
开发框架:vue-cli+axios+router+element-ui+mockjs
一、IE和一些低版本的高级浏览器对es6新语法并不支持,使用babel-polyfill
。
- 装载
babel-polyfill
,cnpm install babel-polyfill --save
。 - 找到build文件夹下webpack.base.conf.js。
将
module.exports = {
entry: {
app: './src/main.js'
},
改为
module.exports = {
entry: {
'babel-polyfill': 'babel-polyfill',
app: './src/main.js'
},
二、Pormise的问题,IE等浏览器不支持Pormise,使得axios不能正常使用,使用es6-promise
。
- 装载
es6-promise
,cnpm install es6-promise --save
。 - 在
main.js
中引用。
import promise from 'es6-promise';
promise.polyfill();
三、URLSearchParams
未定义,IE9支持URLSearchParams
。将使用URLSearchParams
的地方改为使用qs
。
- 装载
qs
,cnpm install qs --save
。 - 在需要使用
qs
的文件,引入import qs from 'qs';
- 将原来使用
URLSearchParams
的地方改为,如下
var params = {
'param1':1,
'param2':2
}
//假设params 为请求参数
qs.stringify(params)
基本上这个方法只会在
axios
的post
方法用到。
·····其他相关问题。
- GET方法在IE9会直接默认去拿缓存,某些时候返回的是304而不是正常拿到数据后的200.这个就在GET方法的params中加个时间戳就行了。
time:new Date().getTime()
- 在使用
axios
时,在then
函数后面切记要用catch
函数承接错误,不然可能会出现不易排查的错误。
不管发生什么事,都请安静且愉快地接受人生,勇敢地、大胆地,而且永远地微笑着。