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


Posted in Javascript onMay 30, 2019

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

Babel 转换 Promise 和 Symbol ES6语法的配置

# 两项都需要放到生产依赖
npm install babel-polyfill --save
npm install es6-promise --save
// main.js
import 'babel-polyfill';
import Es6Promise from 'es6-promise';

Es6Promise.polyfill();
// babel.config.js

process.env.VUE_CLI_BABEL_TRANSPILE_MODULES = true;

module.exports = {
 presets: [
  [
   '@vue/app',
   {
    useBuiltIns: 'entry',
    polyfills: [
     'es6.promise',
     'es6.symbol',
    ],
   },
  ],
 ],
 plugins,
};
// 使用vue cli3构建的vue项目
// vue.config.js
module.exports = {
 transpileDependencies: ['webpack-dev-server/client'],
 chainWebpack: (config) => {
 config.entry.app = ['babel-polyfill', './src/main.js'];
 }
}

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

// .browserslistrc
>= 1%
last 1 major version
not dead
Android >= 4.4

不同运行环境下的严格模式

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

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

没想到发现报错是 Uncaught SyntaxError: Duplicate data property in object literal not allowed in strict mode ,意思是在严格模式下的对象里不能重复定义相同属性,但是这在现代浏览器(Chrome)的严格模式上运行是没有问题的,其结果是后定义的属性值会覆盖前定义的属性值,例如:

'use strict'
var test = {
 a: 1,
 a: 2,
}
// 结果test会定义成 => {a: 2}

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

<van-nav-bar
 title="标题"
 left-text="返回"
 right-text="按钮"
 left-arrow
 @click-left="onClickLeft"
 @click-right="onClickRight"
 :left-arrow="true"
/>

我的项目里 Vant 的 left-arrow 被我重复定义了,组件会被转义成js:

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

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

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

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

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

SyntaxError: Strict mode function may not have duplicate parameter names.

例如:

function fix(a,b,a) {   
   return a+b;   
 }

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

SyntaxError: Octal literals are not allowed in strict mode.

var a = 012;

4. 在eval中声明变量、重新声明、删除或重写eval和arguments这两个标示符

SyntaxError: Assignment to eval or arguments is not allowed in strict mode.

例如:

'use strict';
eval('var foo = 2');

5. 用delete删除显示声明的标识符、名称和具名函数

SyntaxError: Delete of an unqualified identifier in strict mode.

例如:

function temp() { 
 'use strict'; 
 var test = 1; 
 delete test; 
}

6. 代码中使用扩展的保留字,例如 interface , let , yield , package , private 等

SyntaxError: Unexpected strict mode reserved word

7. 使用了 with

SyntaxError: Strict mode code may not include a with statement

8. 函数中不可访问caller、callee以及arguments

例如:

function foo(){
 'use strict';
 foo.caller;  // TypeError
 foo.arguments; // TypeError
 arguments.callee; // TypeError
}
foo();

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript的原生方法获取数组中的最大(最小)值
Dec 19 Javascript
jquery+json实现数据列表分页示例代码
Nov 15 Javascript
JS之Date对象和获取系统当前时间详解
Jan 13 Javascript
用js的document.write输出的广告无阻塞加载的方法
Jun 05 Javascript
如何让你的Lightbox支持滚轮缩放及Base64图片
Dec 04 Javascript
全面解析Bootstrap布局组件应用
Feb 22 Javascript
BootStrap表单验证实例代码
Jan 13 Javascript
全面了解JavaScript的作用域链
Apr 03 Javascript
JS+CSS3实现的简易钟表效果示例
Apr 13 Javascript
微信小程序实现点击生成随机验证码
Sep 09 Javascript
解决element-ui的下拉框有值却无法选中的情况
Nov 07 Javascript
vue-router定义元信息meta操作
Dec 07 Vue.js
基于iview的router常用控制方式
May 30 #Javascript
深入了解js原型模式
May 30 #Javascript
js逆向解密之网络爬虫
May 30 #Javascript
Vue.js中的组件系统
May 30 #Javascript
Vue+Django项目部署详解
May 30 #Javascript
了解重排与重绘
May 29 #Javascript
小程序如何构建骨架屏
May 29 #Javascript
You might like
ThinkPHP使用心得分享-上传类UploadFile的使用
2014/05/15 PHP
php调用shell的方法
2014/11/05 PHP
在Win2003(64位)中配置IIS6+PHP5.2.17+MySQL5.5的运行环境
2016/04/04 PHP
php将一维数组转换为每3个连续值组成的二维数组
2016/05/06 PHP
PHP构造二叉树算法示例
2017/06/21 PHP
PHP实现基于回溯法求解迷宫问题的方法详解
2017/08/17 PHP
PHP实现的pdo连接数据库并插入数据功能简单示例
2019/03/30 PHP
Laravel timestamps 设置为unix时间戳的方法
2019/10/11 PHP
使用prototype.js 的时候应该特别注意的几个问题.
2007/04/12 Javascript
Javascript公共脚本库系列(一): 弹出层脚本
2011/02/24 Javascript
关于jquery ajax 调用带参数的webservice返回XML数据一个小细节
2012/07/31 Javascript
使用typeof判断function是否存在于上下文
2014/08/14 Javascript
实现图片预加载的三大方法及优缺点分析
2014/11/19 Javascript
javascript与css3动画结合使用小结
2015/03/11 Javascript
代码分析jQuery四种静态方法使用
2015/07/23 Javascript
JS实现的左侧竖向滑动菜单效果代码
2015/10/19 Javascript
javascript简单判断输入内容是否合法的方法
2016/05/11 Javascript
浅谈js中对象的使用
2016/08/11 Javascript
jQuery实现页面倒计时并刷新效果
2017/03/13 Javascript
JavaScript中常见的八个陷阱总结
2017/06/28 Javascript
在Vue中如何使用Cookie操作实例
2017/07/27 Javascript
vue.js  父向子组件传参的实例代码
2017/10/29 Javascript
vue3.0中setup使用(两种用法)
2020/12/02 Vue.js
[01:07]DOTA2次级职业联赛 - Fpb战队宣传片
2014/12/01 DOTA
python实现的DES加密算法和3DES加密算法实例
2015/06/03 Python
Python使用random.shuffle()打乱列表顺序的方法
2018/11/08 Python
基于腾讯云服务器部署微信小程序后台服务(Python+Django)
2019/05/08 Python
利用pandas将非数值数据转换成数值的方式
2019/12/18 Python
HTML5资源预加载(Link prefetch)详细介绍(给你的网页加速)
2014/05/07 HTML / CSS
审计工作个人的自我评价
2013/12/25 职场文书
门卫岗位职责说明书
2014/08/18 职场文书
2015年女职工工作总结
2015/05/15 职场文书
师范生小学见习总结
2015/06/23 职场文书
jQuery实现影院选座订座效果
2021/04/13 jQuery
如何利用pygame实现打飞机小游戏
2021/05/30 Python
MySQL 用 limit 为什么会影响性能
2021/09/15 MySQL