这两天在做项目时,发现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>
3.在script 标签中 添加 type=“text/babel”。这里只需要将含有转换es5语法的script标签添加上就可以。
<script type="text/babel">
new Vue({
el: '#app',
data: function() {
return {
visible: false,
tableData: []
}
},
methods:{
}
})
</script>