Vue 后台管理类项目兼容IE9+的方法示例

当今很多浏览器都能很好地支持Vue框架，但是在一些特殊的环境中，我们还需要为IE9+这样的旧浏览器兼容Vue，本文将详细讲解如何在Vue后台管理类项目中兼容IE9+的方法。

方法一：添加Polyfill

我们可以给项目添加Polyfill，Polyfill是一种JavaScript代码，其能够为旧版浏览器提供一些现代浏览器中已经內建的功能。在Vue项目中，我们可以使用babel-polyfill或core-js等方案，具体方法如下：

1. 安装polyfill

npm install --save babel-polyfill

或者

npm install --save core-js

1. 在main.js文件中引入

import 'babel-polyfill'

或者

import 'core-js/stable';
import 'regenerator-runtime/runtime';

这样子，我们就成功地让我们的Vue项目兼容到了IE9+浏览器。

方法二：使用插件

如果你不想自己去写兼容性代码，也可以考虑使用已有的插件，例如vue-plugin-load-script插件。这个插件可以让我们在需要的时候加载指定的脚本文件，可以很好地解决兼容性问题。

具体方法如下：

1. 安装插件

npm install --save vue-plugin-load-script

1. 在main.js文件中引入

import Vue from 'vue'
import LoadScript from 'vue-plugin-load-script'

Vue.use(LoadScript)

1. 在需要的组件中进行使用

例如，我们需要在IE9+浏览器中加载es5-shim和es5-sham两个兼容性脚本，可以在组件中进行如下调用：

this.$loadScript('/static/lib/es5-shim.min.js')
    .then(() => {
        return this.$loadScript('/static/lib/es5-sham.min.js')
    })
    .then(() => {
        console.log('兼容性脚本已全部加载！')
    })
    .catch(() => {
        console.log('兼容性脚本加载失败！')
    })

这样子，我们也能够成功地在IE9+浏览器中进行vue的兼容了。

总结：
上述两种方法都是可行的兼容方式，我们可以根据项目需求进行选择。对于复杂的旧浏览器兼容问题，我们可以优先考虑使用第二种方案，使用插件来进行兼容代码的封装，更为简便可靠。