## 7. 兼容性处理
> 我们的目标是兼容到ie9,对ie8及以下的浏览器做相应的跳转处理(跳转到浏览器下载界面)
>
> 兼容性对一个程序来说是非常重要的，兼容性测试越早越好
### 7.1 对ie8及以下浏览器的跳转处理
在项目根目录下中的html中head中加入下面代码
```html
<!--[if lte IE 8]><script>window.location.href="https://support.dmeng.net/upgrade-your-browser.html?referrer="+encodeURIComponent(window.location.href);</script><![endif]-->
```
目的是检测ie浏览器的版本，如果低于<=ie8，就跳转到下面这个页面
### 7.2 兼容ie9
> 参考链接：https://juejin.im/post/5b2868b46fb9a00e6f65f87e
#### 7.2.1 ES6兼容
我们把浏览器调到ie9,然后看控制台报错信息
报这个错的原因是es6的新对象，新表达式，ie9不支持，为解决这个问题，我们需要引入`babel-polyfill`
```js
cnpm i babel-polyfill -D
```
安装完成之后，在main.js文件中引入
```js
import 'babel-polyfill'
```
在项目使用 `vue-cli` 生成的代码中，根目录有一个 `.babelrc` 文件，这是项目使用 babel 的配置文件。在默认生成的模板内容中，增加 `"useBuiltIns": "entry"` 的设置内容，这是一个指定哪些内容需要被 polyfill(兼容) 的设置
useBuiltIns 有三个设置选项
* `false` - 不做任何操作
* `entry` - 根据浏览器版本的支持，将 polyfill 需求拆分引入，仅引入有浏览器不支持的polyfill
* `usage` - 检测代码中 `ES6/7/8` 等的使用情况，仅仅加载代码中用到的 polyfill
#### 7.2.2建立自己的polyfill
加入这些代码后，工程中大部分代码已可以兼容到ie9版本,但还是会有少部分不兼容的特性，例如`requestAnimationFrame`、`classList`等。对于这些内容，我们需要自己定义polyfill来解决，在src目录下新建一个文件夹polyfill,然后在polyfill文件夹下面建一个polyfill.js，我们在polyfill.js中加入我们的兼容代码
然后在main.js中引入这个文件
```js
import './polyfill/polyfill'
```
解决兼容方式的正确姿势是：`拿到ie9浏览器下的报错信息，去goole或者baidu搜索，得到polyfill,然后加入到自己的polyfill.js文件中`
