原生html页面引入vue.js，IE兼容性问题
JyLie 2022-07-19 IE兼容性VueJS
这两天在做项目时，发现 vue 的在 ie 下显示不正常，且部分没有编译，百度看了很多方法，都是解决 vue-cli 搭框架的问题，但我在项目中没有用 vue-cli 搭框架，而是直接在 HTML 中引入 vue.js 文件。最后终于找到一个解决方法，现在记录以下，方便以后看，
IE 不兼容 Vue 的原因无非就是编译不了高于 ES5 的语法,因此解决 IE 的兼容问题就要将项目中的高级语法转化为 IE 可以编译的 ES5 语法。
在 vue-cli 中，ie 浏览器下不显示，需要下载安装 babel-polyfill（npm i babel-polyfill），同样的，在 html 中使用 vue 的语法时，也需要引入 babel 和 polyfill。
# 具体步骤：
- 下载文件到本地，并且放到自己的 js 文件中:
（1）browser.min.js 源码 ： https://blog-static.cnblogs.com/files/gxsyj/browser.min.js
（2）polyfill.min.js 源码：https://blog-static.cnblogs.com/files/gxsyj/polyfill.min.js
- 一定要在引入 vue.js 之前就引入这两个文件。
<script src="~/Views/TodayPlan/browser.min.js"></script>
<script src="~/Views/TodayPlan/polyfill.min.js"></script>
1
2
2
- 在
script标签中 添加type="text/babel"。只需要在需要转换 为 es5 语法的 script 标签添加上就可以。
<script type="text/babel">
new Vue({
el: '#app',
data: function() {
return {
visible: false,
tableData: []
}
},
methods:{
}
})
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
配置来到这里正常浏览器基本可以运行，但有时候也会碰见 xxx is not undefined 的报错，思来想去的还是碰着运气试试是否浏览器加载脚本文件顺序有关，于是在脚本文件的逻辑上嵌套了在文本加载完后在执行的逻辑，从 JavaScript 的原理上就是嵌套一个监听页面加载完毕的事件。
document.ready = function() {};
1
另外安全起见，预防双引擎浏览器的加载，设置优先使用最先进的引擎
``html
```