muse-ui有用到es6语法，如箭头函数，因此无法在ie10/11使用，vue-cli有提供了解决方案，可以把项目的依赖包（如muse-ui）在打包时进行转换以兼容ie。

背景

把一个muse-ui+vue的项目用HbuilderX打包成h5+app，在我的华为手机荣耀畅玩X7可以正常运行。但突然有个网友反应vivo手机安装app后页面一片空白，他说可能是他的手机系统比较早的原因导致。

寻找原因

于是拿出我手头的oppo手机测试也是一样空白（庆幸可以复原出相同问题）。于是用HbuilderX进行真机调试。发现一启动报错：Uncaught SyntaxError:Unexpected token=>，定位到报错代码，发现是一个箭头函数报错。于是百度谷歌了一番，找到了问题大致原因：浏览器内核不支持es6语法，于是尝试着在电脑ie10打开页面发现也是报同样的错误。

解决问题

综合了网上很多文章的意见及自己尝试，最终解决方案如下：

  1. 修改.browserslistrc文件支持ie10
     > 1%
 last 2 versions
 not ie < 10
  2. 在main.js首行引入core-js，原因详见参考文章
    import "core-js"; //首行
  3. 修改babel.config.js文件，新增useBuiltIns配置，原因详见参考文章
     module.exports = {
    presets: [
        ['@vue/cli-plugin-babel/preset', {useBuiltIns: 'entry'}]
    ],
    "plugins": ["transform-object-rest-spread"] //不能解析es6语法关键解决

    }
  4. 修改vue.config.js文件，前面配置的可以让项目自身的代码兼容ie,但由于muse-ui是依赖包，还需要单独再列出让vue-cli编译兼容。
       module.exports = {
        publicPath: './',
        transpileDependencies: ["muse-ui"]       // 需要编译的依赖包名
    };

总结

  • 由vivo手机安装app后页面的空白问题，再延伸到ie的兼容性，这步很重要。ie兼容性在电脑就好调试多了。
  • 自己前端知识的贫瘠，以后还是要多学习，广涉略。

参考