vue-cli 在IE下兼容设置

Posted tmsdxcz

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue-cli 在IE下兼容设置相关的知识,希望对你有一定的参考价值。

最近我们的项目选择用vue来做开发,在这个过程IE兼容性


首先我们按照步骤来安装vue-cli 
创建项目运行

npm install
npm run dev

然后我们在ie9下打开发现没有用但是vue官网告诉我们他是兼容ie9的技术分享图片

官网地址:https://github.com/vuejs/vue

下图是错误提示ie9: 
技术分享图片 
然后就找资料查文档,总算给我找到了。 
要实现其实很简单,只需要我们下载一个babel-polyfill,

npm install babel-polyfill --save-dev

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

module.exports = {
  entry: {
    app: ‘./src/main.js‘
  },

改成

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

 

就ok了 是不是很简单

第二问题就是axios的请求在ie下没有用 
这个怎么解决? 
也是就是下载一个js的问题 
下面就直接贴代码

npm install es6-promise --save-dev
/*main.js下*/
 import promise from ‘es6-promise‘
 promise.polyfill()

 

 

辛辛苦苦把项目写好了,然后再Chrome跑的天衣无缝。然后经理告诉我要兼容ie9及以上。信心满满的拿出来试了试。GG思密达!!!

一、Pormise的问题,原来是Axios不能直接兼容IE9

先去项目里下载es6-promise

npm install es6-promise

然后去页面导入

import promise from ‘es6-promise‘;
promise.polyfill();
二、URLSearchParams未定义的问题,原来是IE9不支持URLSearchParams。(千万别用一些不被大众浏览器兼容的东西,都是坑)

先去项目里下载qs

npm install qs

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

import qsfrom ‘qs‘;
var params = {
‘param1‘:1,
‘param2‘:2
}
qs.stringify(params)
三、GET方法在IE9会直接默认去拿缓存,返回的是304而不是正常拿到数据后的200.
这个就在GET方法的params中加个时间戳就行了。
time:new Date().getTime()








以上是关于vue-cli 在IE下兼容设置的主要内容,如果未能解决你的问题,请参考以下文章

兼容ie8,firefox,chrome浏览器的代码片段

vue项目兼容IE浏览器

vue-cli3 兼容 IE 浏览器的不完全踩坑之旅

VUE-cli 兼容 IE

vue-cli项目在IE下运行钩子函数抛出异常“ReferenceError: “Promise”未定义"”的解决办法

vue兼容ie9-11