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