详解使用VueJS开发项目中的兼容问题

详解使用VueJS开发项目中的兼容问题

本篇文章针对在vue项目中 遇到的兼容性问题以及解决方法做了详细的总结、

一，VUE项目一般会使用axios，而axios又是基于promise的，所以，IE任何版本都不支持（trident内核的全不行）

解决方案一：

/*ie兼容 Promise*/isIE();function isIE() { //ie?if ( !! window.ActiveXObject || "ActiveXObject" in window) {var script = document.createElement("script");script.type = "text/javascript";script.src = "/js/unity/bluebird.js";document.getElementsByTagName('head')[0].appendChild(script);}}/*ie兼容 Promise end*/

解决方案二 （babel）：
具体:https://blog.csdn.net/weixin_46034375/article/details/107926680

1.安装 babel-polyfill 依赖包：npm install babel-polyfill --save
2.在 vue 项目的 mian.js 中引用即可：import 'babel-polyfill'

1. 安装babel-polyfill 执行以下命令，重启服务器： npm install --save babel-polyfill2.在main.js引入 import 'babel-polyfill'3.在webpack.base.conf.js中配置: entry: {app: ['babel-polyfill','./src/main.js'] },

解决方案三：VueJS在IE中提示promise未定义的问题

//安装promise $ npm install es6-promise --save-dev 2. 引用并调用 在main.js文件：import promise from 'es6-promise' promise.polyfill()

二 、IE不支持箭头函数

解决方案：

①可以安装插件，
②不使用箭头函数，直接用function函数，只需var that = this来指代this

三、异步回调函数中this无法指向vue实例

解决方案：将function函数改为箭头函数

四、解决移动端某些版本的浏览器，点击事件有3s延时触发的问题

· 安装 fastclick 依赖包：npm install fastclick --save-dev

· 在Vue项目的Main.js中将 fastclick 绑定到 body 即可：

　import fastClick from 'fastclick'fastClick.attach(document.body)

五、css样式

清除 css 初始样式：reset.css
解决2倍、多倍屏1px边框的问题：border.css
备注：这些css文件在百度搜索就可以找e到

总结

以上是生活随笔为你收集整理的详解使用VueJS开发项目中的兼容问题的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。