vue-cli4 打包后,在部分安卓5的手机下,打开白屏

前言

这里的白屏,我这边发现的是因为低版本手机不支持ES6语法的原因。所以要吧ES6语法转换为ES5。

一般来说,vue-cli会默认使用 @vue/babel-preset-app来对代码的ES6语法进行处理为ES5的。但是看网上的说法是,vue-cli 会忽略所有 node_modules 中的文件,不会主动的去处理依赖包里面的ES6语法(事实也是如此)。因此有些依赖使用了ES6的语法,就会导致低版本手机打开报错、白屏了。

1、处理方法

vue-cli也给出了处理办法,配置 transpileDependencies参数

在vue.config.js文件中,配置transpileDependencies参数,把存在es6语法的依赖加入进去,我觉得'crypto-js','asn1.js'这个两个依赖存在ES6语法,我就给加入进去了(asn1.js是肯定的了,后面我试了一下crypto-js没Es6,asn1不知道哪冒出来的)

配置完之后重新打包就可以了。

在vue.config.js文件中的transpileDependencies配置.png

配置的代码:

transpileDependencies:['asn1.js'],

2、这么多依赖,我怎么知道哪个依赖存在ES6语法

build打包之后,全局搜索打包后的文件,可搜索:“const ”、“let ”看看,看是否有存在 以及 存在那个文件。

image.png
搜索结果.png

然后哪个依赖呢??
?我也懵了,我也不知道了。
我看到这个文件有对应的.LICENSE.txt文件,我就去看了一下,


image.png

嗯~ 看到了asn1这个不认识的依赖,额 不管了,先加上试试,哈哈 运气好,修好白屏问题了。
这个就当作看 打包之后有没有ES6语法了。怎么知道哪个依赖存在ES6语法,有知道的大神可以告知一下哈。

最后 注意,使用这个方法解决问题的,我发现,使用cnpm(淘宝镜像源)安装依赖的,打包之后,所做的处理好像没生效,要使用npm来安装依赖。(再)

  • 再给点建议,使用 vConsole、swipe的,好像也有ES6的语法问题,可以留意一下,我没去验证过,到时可以加进配置里面

匆匆忙忙写,有点乱,有什么不对,望指教。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 最近遇到一个问题,用 Vue 开发的项目在最近两年新出的安卓手机上没问题,在三四年前的旧手机上出现白屏问题。分析一...
    solocoder阅读 8,610评论 0 1
  • 正在更新中... 声明:所有文章都是转载整理的,只是为了自己学习,方便自己观看,如有侵权,请立即联系我,谢谢~ V...
    是河兔兔啊阅读 9,976评论 0 1
  • Vue-CLI vue-cli是一种基于vue.js进行快速开发的完整系统,通过@vue/cli+ @vue/cl...
    jluemmmm阅读 1,924评论 0 0
  • vue-cli是一种基于vue.js进行快速开发的完整系统,通过@vue/cli+ @vue/cli-servic...
    jluemmmm阅读 3,287评论 0 0
  • 我是黑夜里大雨纷飞的人啊 1 “又到一年六月,有人笑有人哭,有人欢乐有人忧愁,有人惊喜有人失落,有的觉得收获满满有...
    陌忘宇阅读 12,728评论 28 53