1.5　Vue.js的兼容性

在开发项目的过程中，前端人员可能会经常遇到不同浏览器之间的不兼容问题或者项目之间的不兼容问题，这类问题往往需要使用插件来进行解决。

下面介绍Vue.js项目的兼容性及项目部署情况。

1．处理兼容性问题的相关插件

（1）解决部分低版本安卓浏览器不支持Promise（ES 6新特性）的问题（还出现白屏情况的打包编译即可解决）。安装babel-polyfill依赖包（执行npm install babel-polyfill--save命令），在Vue项目的main.js中编写import 'babel-polyfill'引用即可。

执行命令如下：

    /*
    *npm install babel-polyfill--save，解决部分低版本浏览器不兼容Promise的问题，或者会导致白屏问题
    **/
    import 'babel-polyfill'

（2）解决移动端某些版本浏览器单击事件延时触发的问题。安装fastclick依赖包（执行npm install fastclick--save-dev命令），在Vue项目的main.js中将fastclick绑定到body即可。

执行命令如下：

    /*
    *npm install fastclick --save-dev，安装fastclick依赖包，避免移动端某些浏览器click事件有延时触发的情况
    **/
    import fastClick from 'fastclick'
    fastClick.attach(document.body)
2．项目的部属与配置

（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代码规范检测（build/webpack.base.conf.js文件，不会对注释代码进行检测）。代码如下：

    /* 代码规范检测 */
    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插件进行快捷代码格式化。

3．Vue兼容问题

（1）使用KingEditor，在IE浏览器下提示“对象不支持moveToElementText属性或方法”。

原来的代码如下：

    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组件的长字符串拼接问题。在IE中不兼容长字符串拼接，因此需要使用字符串拼接。

（3）axios.js的post请求问题。

在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文件，并引入项目中。

上一章目录下一章