## 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文件中`
