您当前的位置：主页 > 技术探讨 >

vue:手机浏览器不支持 ES6 语法兼容处理

时间：2020-06-05 10:00 日记人：arlen.zhou

一.真机测试时，发现在华为手机自带浏览器中，某些点击事件失效，经逐行排查，发现是 es6 的问题。
经过此网站 http://ruanyf.github.io/es-checker/index.cn.html 检测后，得出手机端不同浏览器对es6的支持：

1. 华为浏览器 11%
2. UC浏览器 88%
3. QQ浏览器 88%
4. 微信内置浏览器 90%
5. 钉钉内置浏览器 26%

华为浏览器真的坑！如果某 js 文件中使用了 es6 语法,整体需要降级。项目直接导入babel-polyfill

使用方式：
npm install --save-dev babel-polyfill
npm install es6-promise
 
1.require("babel-polyfill");
 
2.import "babel-polyfill";
 
3.module.exports = {
 
　　entry: ["babel-polyfill", "./app/js"]
 
};
 
单独页面处理：
// 引入babel-polyfill文件 , 处理所有es6语法,使用es5语法 
<script src="https://cdn.bootcss.com/babel-polyfill/6.23.0/polyfill.min.js"></script>
 


二.最近在用vue做项目，项目在安卓4,5，ios9页面显示空白，问题解决跟大家分享一下
安卓4,5，ios9页面空白原因：低版本不支持es6，需要将es6编译成es5
 
具体解决方法
 
1.npm install --save-dev babel-preset-es2015（安装ES2015转码规则）
 
2.npm install --save-dev babel-polyfill
 
3.npm install es6-promise
 
 
4.main.js 中引用 
 
import Es6Promise from 'es6-promise'
 
Es6Promise.polyfill()
 
import 'babel-polyfill'
 
 
5.修改.babelrc文件  
{
"presets": ["es2015" , "stage-2"
],
"plugins": ["transform-vue-jsx", "transform-runtime"]
}
 
6.webpack.base.conf.js 中修改
  对VUX进行转ES5
   {
    test: /vux.src.*?js$/,
    loader: 'babel-loader',
    query: {
    presets: ['es2015']
    },
    },
   对自定义脚本进行转ES5
    {
     test: /\.js$/,
    loader: 'babel-loader',
    query: {
    presets: ['es2015']
    },
    include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
    }
 
    希望能帮到大家:      愿有岁月可回首,且以深情共白头