詳解使用VueJS開(kāi)發(fā)項(xiàng)目中的兼容問(wèn)題

本篇文章針對(duì)在vue項(xiàng)目中 遇到的兼容性問(wèn)題以及解決方法做了詳細(xì)的總結(jié)、

一，VUE項(xiàng)目一般會(huì)使用axios，而axios又是基于promise的，所以，IE任何版本都不支持（trident內(nèi)核的全不行）

解決方案一：

/*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 項(xiàng)目的 mian.js 中引用即可：import 'babel-polyfill'

1. 安裝babel-polyfill 執(zhí)行以下命令，重啟服務(wù)器： 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未定義的問(wèn)題

//安裝promise $ npm install es6-promise --save-dev 2. 引用并調(diào)用 在main.js文件：import promise from 'es6-promise' promise.polyfill()

二 、IE不支持箭頭函數(shù)

解決方案：

①可以安裝插件，
②不使用箭頭函數(shù)，直接用function函數(shù)，只需var that = this來(lái)指代this

三、異步回調(diào)函數(shù)中this無(wú)法指向vue實(shí)例

解決方案：將function函數(shù)改為箭頭函數(shù)

四、解決移動(dòng)端某些版本的瀏覽器，點(diǎn)擊事件有3s延時(shí)觸發(fā)的問(wèn)題

· 安裝 fastclick 依賴包：npm install fastclick --save-dev

· 在Vue項(xiàng)目的Main.js中將 fastclick 綁定到 body 即可：

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

五、css樣式

清除 css 初始樣式：reset.css
解決2倍、多倍屏1px邊框的問(wèn)題：border.css
備注：這些css文件在百度搜索就可以找e到

總結(jié)

以上是生活随笔為你收集整理的详解使用VueJS开发项目中的兼容问题的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。