浮力王捕鱼机教程

書名： Vue.js從入門到項(xiàng)目實(shí)踐（超值版）
作者名：聚慕課教育研發(fā)中心編著
本章字?jǐn)?shù)： 730字
更新時(shí)間： 2022-07-29 14:27:29

1.5　Vue.js的兼容性

在開發(fā)項(xiàng)目的過程中，前端人員可能會(huì)經(jīng)常遇到不同瀏覽器之間的不兼容問題或者項(xiàng)目之間的不兼容問題，這類問題往往需要使用插件來(lái)進(jìn)行解決。

下面介紹Vue.js項(xiàng)目的兼容性及項(xiàng)目部署情況。

1．處理兼容性問題的相關(guān)插件

（1）解決部分低版本安卓瀏覽器不支持Promise（ES 6新特性）的問題（還出現(xiàn)白屏情況的打包編譯即可解決）。安裝babel-polyfill依賴包（執(zhí)行npm install babel-polyfill--save命令），在Vue項(xiàng)目的main.js中編寫import 'babel-polyfill'引用即可。

執(zhí)行命令如下：

    /*
    *npm install babel-polyfill--save，解決部分低版本瀏覽器不兼容Promise的問題，或者會(huì)導(dǎo)致白屏問題
    **/
    import 'babel-polyfill'

（2）解決移動(dòng)端某些版本瀏覽器單擊事件延時(shí)觸發(fā)的問題。安裝fastclick依賴包（執(zhí)行npm install fastclick--save-dev命令），在Vue項(xiàng)目的main.js中將fastclick綁定到body即可。

執(zhí)行命令如下：

    /*
    *npm install fastclick --save-dev，安裝fastclick依賴包，避免移動(dòng)端某些瀏覽器click事件有延時(shí)觸發(fā)的情況
    **/
    import fastClick from 'fastclick'
    fastClick.attach(document.body)

2．項(xiàng)目的部屬與配置

（1）路徑別名配置（build/webpack.base.conf.js文件）。代碼如下：

    resolve:{
       extensionsL['.js','.vue','.json']
       alias:{
       'vue$' : 'vue/dist/vue.esmjs',
       /*可以任意配置目錄別名*/
       '@':resolve(dir:'src'),
       'styles':resolve(dir:'XXX'),
       'common':resolve(dir:'XXX')
       }
    }

（2）webpack提供的代理配置。代碼如下：

（3）ESLint代碼規(guī)范檢測(cè)（build/webpack.base.conf.js文件，不會(huì)對(duì)注釋代碼進(jìn)行檢測(cè)）。代碼如下：

    /* 代碼規(guī)范檢測(cè) */
    const createLintingRule =() =>({
       test : /\.(js|vue)$/,
       loader : 'eslint-loader',
       enforce : [resolve(dir : 'src'),resolve(dir : 'test')],
       options : {
           formatter : require('eslint-friendly-formatter'),
           emitWarning : !config.dev.showEslintErrorsInOverlay
       }
    })

提示：在WebStrom中可以安裝ESLint插件進(jìn)行快捷代碼格式化。

3．Vue兼容問題

（1）使用KingEditor，在IE瀏覽器下提示“對(duì)象不支持moveToElementText屬性或方法”。

原來(lái)的代碼如下：

    if(_IE){
       var rng = cmd.range.get(true);
       rng.moveToElementText(div[0]);
       rng.select();
       rng.execCommand('paste');
       e.preventDefault();
    }

修改的代碼如下：

    if(_IE){
       var rng = cmd.range.get(true);
       try {
           rng.moveToElementText(div[0]);
           rng.select();
           rng.execCommand('paste');
           e.preventDefault();
         }
       catch(e){ }
    }

提示：在壓縮KingEditor.js后替換KingEditor-min.js即可。

（2）Vue.js組件的長(zhǎng)字符串拼接問題。在IE中不兼容長(zhǎng)字符串拼接，因此需要使用字符串拼接。

（3）axios.js的post請(qǐng)求問題。

在Chrome瀏覽器下，代碼如下：

    var newParams = new URLSearchParams();
    newParams.append('type',vm.typeNum);
    newParams.append('num','20');
    newParams.append('curpage',vm.cur);
    axios.post(url,newParams)
    .then(function(res){
    })
    .catch(function(){…});

在IE瀏覽器下，代碼如下：

（4）在IE瀏覽器下提示Promise未定義的問題。如果遇到Promise未定義的問題需要引入polyfill.js文件，即下載polyfill.js文件，并引入項(xiàng)目中。

官术网_书友最值得收藏!

Vue.js從入門到項(xiàng)目實(shí)踐（超值版）

1.5 Vue.js的兼容性

1．處理兼容性問題的相關(guān)插件

2．項(xiàng)目的部屬與配置

3．Vue兼容問題

1.5　Vue.js的兼容性