vue2.x+vue-cli 解决兼容IE问题

最近用vue-cli搭建了一个管理后台项目,发现在win7的IE10-11下打开是空白的,win10的edge和chrome等其他浏览器都没有问题,因为vue官网告诉我们它是兼容ie9的,后来想了一下可能是es6的一些新特性IE浏览器不支持导致的。

报错原因:

Babel 默认只转换新的 JavaScript 语法(如箭头函数),而不转换新的 API ,比如 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等新的对象或者方法。

例如 Promise 、新的原生方法如 String.padStart (left-pad) 等。为了解决这个问题,我们使用一种叫做 Polyfill(代码填充,也可译作兼容性补丁)的技术。

简单的说,兼容问题一般是IE 对于es6 的部分新对象、表达式,语法并不支持,解决方案是使用 babel-polyfill 来正常使用ES6。

然后就找资料查文档,原来只需要我们下载一个babel-polyfill,

Polyfill 是什么

举个例子,有些旧浏览器不支持 Number.isNaN方法,Polyfill就可以是这样的:

if(!Number.isNaN) {
    Number.isNaN = function(num) {
        return(num !== num);
    }
}

Polyfill就是类似这样解决API的兼容问题。

言归正传,现在我们来下载babel-polyfill:

npm install babel-polyfill -D

下载完成后我们怎么用它 
这时我们要找到build文件夹下webpack.base.conf.js在里面修改一下就行了

module.exports = {
  entry: {
    'babel-polyfill': 'babel-polyfill',
    app: './src/main.js'
  },

增加了poly-fill还是报错,这一般是使用了第三方的ui框架、库、插件等,并且这些ui框架、库、插件底层有es6的语法。

找到webpack.base.conf.js 中的babel-loader

比如我这里用了element-ui 跟 echarts  修改成如下:

{
        test: /\.js$/,
        loader: 'babel-loader',
        include: [
          resolve('src'),
          resolve('test'),
          resolve('node_modules/webpack-dev-server/client'),
          resolve('node_modules/echarts/src'),
          resolve('node_modules/vue-awesome'),
          resolve('node_modules/element-ui/packages'),
          resolve('node_modules/element-ui/src')
        ]
}

重新运行 npm run dev   IE就可以正常运行了

或许会有部分错误,那是因为可能某个字段或者方法写法有问题,或者不能设置为null等等,这些都再需要特定解决下,但是以上方式,能够解决90%的IE兼容问题(只支持IE9以上,包括IE9),最终目的只是将ES6转成ES5。

还有两个问题可能导致IE兼容性问题:

打包问题:

如果是webpack代码打包出错,一般到 github webpack Issues 中可以找到答案

这个错误是因为webpack-dev-server 版本问题

Babel 配置 .babelrc文件

.babelrc是Babel的配置文件,放在项目根目录下。一般情况下.babelrc文件不需要修改,如果以上都做了,还是报错,可以看下官网文档来配置下该文件

在项目使用 vue-cli 生成的代码中,根目录有一个 .babelrc 文件。在默认生成的模板内容中,增加 "useBuiltIns": "entry" ,这是一个指定哪些内容需要被 polyfill(兼容) 的设置
useBuiltIns 有三个设置

  • false - 不做任何操作
  • entry - 根据浏览器版本的支持,将 polyfill 需求拆分引入,仅引入有浏览器不支持的polyfill
  • usage - 检测代码中 ES6/7/8 等的使用情况,仅仅加载代码中用到的 polyfill
{
  "presets": [
    ["env", {
      "modules": false,
      "useBuiltIns": "entry"
    }],
    "stage-2"
  ],
  "plugins": ["transform-runtime", "transform-vue-jsx"],
  "env": {
    "test": {
      "presets": ["env", "stage-2"],
      "plugins": ["istanbul"]
    }
  }
}

具体相关可以查看Babel官网:https://www.babeljs.cn/

第二问题就是axios的请求在ie下没有用 
这个怎么解决? 

1.Pormise的问题,原来是Axios不能直接兼容IE9
也是就是下载一个js的问题 
下面就直接贴代码

npm install es6-promise --d
/*main.js下*/
 import promise from 'es6-promise'
 promise.polyfill()

2.

URLSearchParams未定义的问题,原来是IE9不支持URLSearchParams。(千万别用一些不被大众浏览器兼容的东西,都是坑)

先去项目里下载qs

npm install qs

然后去Axios放参数的时候这样放

import qsfrom 'qs';
var params = {
'param1':1,
'param2':2
}
qs.stringify(params)

3.GET方法在IE9会直接默认去拿缓存,返回的是304而不是正常拿到数据后的200.

这个就在GET方法的params中加个时间戳就行了。

time:new Date().getTime()

常见问题(完成以上解决方式,还是会有部分报错,也可以参考下面):

IE11不识别 data(){}定义的方法(好多都是这种)

data(){
        return {}
    }

修改为:

data: function () {
        return {}
    }

IE10不识别let标识符   
Vue不支持IE8, 因为Vue使用了IE8无法模拟的ECMAScript 5 特性, 但它支持所有兼容ECMAScript 5 的浏览器
IE8不识别 vue.js 中的: var extendsFrom = child.extends; // 报错缺少标识符
xp系统最高只支持IE8
 

参考链接:https://www.cnblogs.com/CandyManPing/p/10195377.html

https://blog.csdn.net/u014080304/article/details/88531756

  • 2
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值