详解一次Vue低版本安卓白屏问题的解决过程

　　

因为业务需要一定要使用安卓4.4的webview浏览页面,测试的时候发生了白屏问题,很自然想到使用巴贝尔转换部分ES6语法。

　　


　　

　　 　　 　　#两项都需要放到生产依赖 　　npm安装babel-polyfill——保存 　　npm安装es6-promise——保存 　　 　　 　　//main.js 　　进口“babel-polyfill”; 　　从“进口Es6Promise es6-promise '; 　　 　　Es6Promise.polyfill (); 　　之前 　　 　　 　　//babel.config.js 　　 　　过程。VUE_CLI_BABEL_TRANSPILE_MODULES=true; 　　 　　模块。出口={ 　　预设:[ 　　( 　　“@vue/应用程序”, 　　{ 　　useBuiltIns:“入口”, 　　polyfills:( 　　“es6.promise”, 　　“es6.symbol”, 　　]， 　　}， 　　]， 　　]， 　　插件, 　　}; 　　之前 　　 　　 　　//使用vue cli3构建的vue项目//vue.config.js 　　模块。出口={ 　　transpileDependencies:(“webpack-dev-server/客户端”), 　　chainWebpack:(配置)=比;{ 　　config.entry。应用=[' babel-polyfill ', '。/src/main.js ']; 　　} 　　} 　　之前 　　 　　

但结果还是白屏,那么决定使用巴贝尔把语法转换成安卓4.4以上,应该没有问题了。

　　 　　//.browserslistrc 　　祝辞=1% 　　最后1主要版本 　　没有死 　　Android在=4.4 　　之前 　　 　　


　　

　　

结果还是白屏,查阅众多网络文章,同样没有很好的答案…

　　

百思不得其解,无奈之下在Android上工作室下载了个4.4的模拟器,在内置浏览器上打开页面,使用Chrome远程调试Android上的浏览器,在Chrome上地址栏输入Chrome://检查/#设备选择相应模拟器设备的检查就会弹出控制台调试。

　　

没想到发现报错是未捕获SyntaxError:重复数据属性的对象字面不允许在严格模式下,意思是在严格模式下的对象里不能重复定义相同属性,但是这在现代浏览器(铬)的严格模式上运行是没有问题的,其结果是后定义的属性值会覆盖前定义的属性值,例如:

　　 　　 　　使用严格的 　　var={测试 　　答:1, 　　2, 　　}//结果测试会定义成=比;{:2} 　　之前 　　 　　

但是为什么会这样呢,在打包后的报错js文件里将其格式化后发现是组件的属性重复定义了,

　　 　　 　　& lt; van-nav-bar 　　title=氨晏狻? 　　左文本="返回” 　　right-text="按钮” 　　左箭头 　　@click-left=" onClickLeft " 　　@click-right=" onClickRight " 　　:左箭头=" true "/比; 　　之前 　　 　　

我的项目里Vant的左箭头被我重复定义了,组件会被转义成js:

　　

详解一次Vue低版本安卓白屏问题的解决过程

　　

所以说不同运行环境的严格模式还是会有不一样的结果,

　　

在网上查了下资料总结了严格模式下的几种错误:

　　

1。我上面遇到的对象属性重复定义
　　

　　

2。在函数声明中相同的参数名
　　

　　

<代码> SyntaxError:严格的模式函数可能没有重复的参数名称。

　　

例如: 　　 　　 　　功能修复(a, b, a) { 　　返回一个+ b; 　　} 　　之前 　　 　　

3。用前导0声明8进制直接量
　　

　　

<代码> SyntaxError:八进制文字是不允许在严格模式。

　　 　　 　　var=012; 　　 　　

4。在eval中声明变量,重新声明,删除或重写eval和参数这两个标示符
　　

　　

<代码> SyntaxError:作业eval或参数不允许在严格模式。

　　

例如: 　　 　　 　　使用严格的; 　　eval (var foo=2); 　　之前 　　 　　

5。用删除删除显示声明的标识符,名称和具名函数
　　

　　

<代码> SyntaxError:删除不合格的标识符的严格模式。

　　

例如: 　　 　　 　　函数临时(){ 　　使用严格的; 　　var测试=1; 　　删除测试; 　　} 　　之前 　　 　　

6。代码中使用扩展的保留字,例如界面,让,产量、包、私人等
　　

　　

<代码> SyntaxError:意想不到的严格模式保留字

　　

7。使用了与
　　

　　

<代码> SyntaxError:严格的模式代码可能不包括一个声明

详解一次Vue低版本安卓白屏问题的解决过程