详细说明Vue低版本安卓白屏问题的解决过程

因为业务需要，我们必须使用Android 4.4的webview来浏览页面。测试的时候出现了白屏的问题，所以很自然的想到用巴别塔来转换一些ES6语法。

巴贝尔转换了承诺和符号ES6语法的配置

#两个项目都需要投入生产依赖NPM安装babel-polyill-save NPM安装es6-promise-save//main.js导入‘babel-polyill’；从“es6-promise”导入Es6Promisees6 promise . poly ill()；//BABEL . config . jsprocess . env . vue _ CLI _ BABEL _ TRANSPILE _ MODULES=true；module . exports={ presets :[[' @ vue/app '，{ useBuiltIns: ' entry '，poly ills 3360[' es6 . promise '，' es6.symbol '，]，}，]，plugins，}；//使用vue cli3//vue . config . js module . exports={ transpiercependencies 3360[' web pack-dev-server/client ']，chain web pack 3360(config)={ config . entry . app=[' babel-poly ill '，}}但是结果还是一片空白，所以决定用Babel把语法转换成安卓4.4以上应该没问题。

//.browserslistrc=1% last1主版本不死Android=4.4不同运行环境下的严格模式

结果还是白屏。看了很多网上的文章，也没有好的答案.

无法理解，在安卓Studio上下载了一个4.4模拟器，在内置浏览器上打开页面，使用Chrome远程调试安卓上的浏览器，在Chrome上的地址栏输入Chrome 3360///inspect/# devices，然后会弹出控制台进行调试。

出乎意料的是，发现报告的错误是不清楚的语法错误：严格模式下不允许对象文字中重复的数据属性，这意味着在严格模式下不能在对象中重复定义相同的属性，但是在现代浏览器(Chrome)的严格模式下运行是没有问题的。因此，稍后定义的属性值将覆盖之前定义的属性值，例如：

使用严格的' var test={a: 1，a: 2，}//结果测试将被定义为={a: 2}，但为什么会这样呢？在打包的错误报告js文件中格式化之后，发现组件的属性被重复定义。

van-nav-bar title=' title ' left-text=' return to ' right-text=' button ' left-arrow @ click-left=' onclick left ' @ click-right=' onclick right ' : left-arrow=' true '/Vant在我的项目中的左箭头

因此，不同操作环境的严格模式仍然会有不同的结果，

我查了网上的数据，总结了严格模式下的几个错误：

1.我在上面遇到的对象属性是重复定义的

2.函数声明中的相同参数名

语法分析器：严格模式函数不能有重复的参数名。

例如：

函数fix(a，b，a){ return a b；}3.用前导零声明八进制直接量

严格模式下不允许八进制文字。

var a=0124.在eval中声明变量，重新声明、删除或重写eval和参数

语法分析器：严格模式下不允许赋值给求值或参数。

例如：

使用“严格”；eval(' var foo=2 ')；5.删除显示声明的标识符、名称和命名函数

语法分析器：在严格模式下删除不合格的标识符。

例如：

函数temp() { '使用strict '；var测试=1；删除测试；}6.在代码中使用扩展的保留字，如接口、let、yield、package、private等等

语法分析器：意外的严格模式保留字

7.一起使用

语法分析器：严格模式代码不能包含with语句

8.无法在函数中访问调用者、被调用者和参数

例如：

function foo(){ '使用strict '；foo.caller//TypeError foo . arguments；//TypeError参数.被调用方；//TypeError } foo()；以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。