VueJSを使用したプロジェクトの開発における互換性の問題を詳細に説明します

VueJSを使用したプロジェクトの開発における互換性の問題を詳細に説明します

この記事では、Vueプロジェクトで発生した互換性の問題とその解決策について詳しく説明します

まず、VUEプロジェクトは一般にaxiosを使用し、axiosはpromiseに基づいているため、IEのどのバージョンもそれをサポートしていません(トライデントカーネルは機能しません)

解決策1:

/*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*/

ソリューション2(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-polyfill

2.在main.js引入
import 'babel-polyfill'

3.在webpack.base.conf.js中配置:
entry: {
    
    
    app: ['babel-polyfill','./src/main.js']
},

解決策3:VueJSは、IEでの未定義の約束の問題を促します

//安装promise
$ npm install es6-promise --save-dev
2. 引用并调用
在main.js文件:

import promise from 'es6-promise'
promise.polyfill()


2.IEは矢印機能をサポートしていません

解決:

①プラグインをインストールできます
。②矢印機能を使用せず、機能機能を直接使用してください。varthat= thisで参照してください。

第三に、これは非同期コールバック関数のvueインスタンスを指すことができません

解決策:関数関数を矢印関数に変更します

4.モバイルブラウザの一部のバージョンでクリックイベントのトリガーが3秒遅れる問題を解決します

fastclick依存関係パッケージをインストールしますnpm install fastclick --save-dev

fastclickをVueプロジェクトのMain.jsの本文にバインドします。

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

5、cssスタイル

クリアcss初期スタイル:reset.css
2xの1pxボーダーと複数の画面の問題を解決しますborder.css
注:これらのcssファイルはBaidu検索で見つけることができます

おすすめ

転載: blog.csdn.net/weixin_46034375/article/details/108475539