Vue兼容IE9全功能正常使用的解决方法是什么

本文介绍了“Vue兼容IE9全功能正常使用的解决方案是什么”的相关知识。很多人在实际案例的操作中会遇到这样的困难。接下来，让边肖带领大家学习如何应对这些情况！希望大家认真阅读，学点东西！

前言

背景情况

vue - 2.5.11

Vue-cli使用模板webpack-simple

Http请求：axios

Vu官方对ie浏览器版本兼容性的描述是ie9，也就是ie9及更高版本。经过测试，Vue的核心框架，vuejs本身，以及生态的官方核心插件(VueRouter，Vuex等。)可以在ie9上正常使用。

ES6兼容

在ie9环境中，不支持es6的一些新对象和表达式。解决方案是使用babel-polyfill组件，它可以将es6的代码翻译成较低浏览器可以识别的es5的代码。

安装后可以直接引用项目主入口文件main.js的第一行。

在使用vue-cli的项目生成的代码中，根目录下有一个. babelrc文件，这是使用babel的项目的配置文件。在默认生成的模板内容中，添加“使用UseBuildIns”:“条目”的设置内容，这是一个指定哪些内容需要聚合填充(兼容)的设置。

使用内置有三个设置选项。

假的-什么都不做。

入口-根据浏览器版本的支持，拆分并引入polyfill需求，只引入浏览器不支持的polyfill。

用法-检测代码中ES6/7/8的用法，只加载代码中使用的polyfill。

这里推荐的设置是entry，以及的完整内容。babelrc如下：

添加这些代码后，项目中的大部分内容已经与ie9版本兼容。

00-1010即使使用babel-polyfill进行代码翻译后，发现es6还有一些新的特性没有解决，比如Number对象的parseInt和parseFloat方法。

Es6将全局方法parseInt()和parseFloat()移植到Number对象，行为保持完全不变。这样做的目的是逐步减少全局方法，使语言逐步模块化。

要解决这个问题，没有必要引入包来解决。同样，下面的代码被添加到项目的主入口文件main.js中(代码尽可能靠前，* * *是在引用babel-poly ill之后)。

00-1010窗口。RequestAnimation Frame是浏览器进行定时循环操作的界面，类似于setTimeout，其主要目的是逐帧重绘网页。

requestAnimationFrame的优势在于充分利用了显示器的刷新机制，节省了系统资源。显示器有固定的刷新频率(60Hz或75Hz)，即每秒最多只能重绘60次或75次。requestAnimationFrame的基本思想是跟上这种刷新频率，并使用这种刷新频率来重绘页面。此外，使用这个API，一旦页面不在浏览器的当前选项卡中，就会自动停止刷新。这样可以节省CPU、GPU和功耗。

但是，需要注意的是，requestAnimationFrame是在主线程上完成的。这意味着如果主线程很忙，requestAnimationFrame的动画效果会大大降低。

window.requestAnimationFrame()方法告诉浏览器您想要执行动画，并请求浏览器在下一次重绘之前调用指定的函数来更新动画。此方法将回调函数作为参数，该参数将在浏览器重绘之前调用。

/p>

有部分第三方组件就使用了这个方法，例如部分文件上传、图片处理类的组件；那么在这类型的组件在 ie9 下使用时，会报出

window.requestAnimationFrame() 的***兼容 ie 版本为 10，那么在 ie9 上做兼容就需要制作 requestAnimationFrame polyfill

Gist：requestAnimationFrame polyfill

这部分代码同样是尽可能在网站入口处就执行

http网络请求（跨域）

在大多数的 Web 项目中（以 JavaWeb 为例），网站的页面和服务（至少是 controller 层）在同一个工程进行开发和部署，在大前端的新型模式下，我们建议尽可能对网站的前端和后端进行完全分离，前后端分离的好处和意义这里不再赘述。

既然是前后端分离，那么部署也必然是各自独立部署，不同的访问路径，就会产生跨域访问的问题（同一站点，不同端口号也是跨域）

在此设定背景情况：

• 服务端已完整开启 CROS 跨域支持

• http 组件使用 axios

• axios 设置 withCredentials 为 true 开启跨域访问时携带 cookie 数据

高版本浏览器（ie10+ 或 chrome, ff）仅需要完成背景情况中的功能，即可支持跨域数据请求功能

axios 进行数据请求时，默认使用 XMLHttpRequest 对象，在检测到当前请求是跨域访问时，axios 会测试浏览器是否支持 XDomainRequest 对象，若支持则优先使用。

ie8 / ie9 的 XMLHttpRequest 对象，不支持跨域访问，该对象在 ie10 后才原生支持跨域访问。微软的解决方案是在 ie8 / ie9 中提供了 XDomainRequest(XDR) 对象来进行解决跨域问题，虽然使用该对象可以跨域访问成功，并返回数据，但它却依然是一个功能不完整的半成品，它的使用有诸多限制：

• XDR 仅支持 GET 与 POST 两种请求方式

• XDR 不支持自定义的请求头，若服务端使用 header 的自定义参数进行做身份验证，则不可用

• 请求头的 Content-Type 只允许设置为 text/plain

• XDR 不允许跨协议的请求，如果网页在 HTTP 协议下，就只能请求 HTTP 协议下的接口，不能访问 HTTPS 接口

• XDR 只接受HTTP/HTTPS 的请求

• 发起请求的时候，不会携带 authentication 或 cookies

微软虽然提供了解决方案，但却是不折不扣的鸡肋，根本无法胜任系统中各种场景的数据请求需求，至此，axios 对 ie9 的跨域数据请求已无能为力。

***解决方案：代理（proxy）

虽然 axios 对 ie9 跨域已无能为力，但前端项目打包的解决方案 webpack 提供了一个优雅而彻底解决问题的方式：代理

devServer.proxy

webpack 的 devServer.proxy 的功能是由 http-proxy-middleware 项目来实现的

实现原理是将目标位置的请求代理为前端服务本地的请求，既然是代理成为本地的请求，就不存在跨域的问题，axios 就会用回 XMLHttpRequest 对象进行数据请求，一切都恢复正常了，header、cookies、content-type、authentication 等内容都被正确传递到服务端。

项目中 webpack.config.js 的配置

配置中指定了将 http://localhost:8081/myserver 服务的位置代理为本地前端服务的 http://localhost:8080/api。例如需要读取用户信息的原请求是 http://localhost:8081/myserver/user/zhangsan，代理后，就变为 http://localhost:8080/api/user/zhangsan。

即是 /api 的前缀代表了服务端，所以在使用 axios 时，需要对每个服务端请求都增加上 /api 的前缀；通常在项目开发中，需要对数据请求组件 axios 进行二次封装，以达到统一设置默认参数，统一数据请求入口等目的，那么此时就只需要在二次封装的文件里统一调整请求前缀即可。

不过，webpack 的 devServer.proxy 仅在开发模式下可用，生产模式下无法使用。开发模式下，调试服务可以读取 webpack.config.js 中的配置内容进行实时代理，而项目在部署到生产环境前，需要将工程进行编译转换成静态的 js 文件，没有调试服务的支撑自然是无法进行请求代理的。

nginx 配置

虽然 devServer.proxy 的功能仅能工作于开发模式，那么在生产模式下，自然也是有解决方案的；通常 Vue 的项目在编译成最终的 js 文件后，仅需要静态服务器即可，这其中又以 nginx 为***选择方案，轻量、高性能、高并发、反向代理服务等均为其优点，这里需要做的数据请求代理的功能就使用到了 nginx 的 反向代理 功能

conf/nginx.conf 文件配置增加以下内容

该配置同样是将 http://localhost:8081/myserver/ 的目标服务端位置代理为本地服务的 /api 路径，如此，生产环境下的数据请求问题也得以解决 。

“Vue兼容IE9全功能正常使用的解决方法是什么”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注网站，小编将为大家输出更多高质量的实用文章！