详解一次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 相关文章推荐
jquery多浏览器捕捉回车事件代码
Jun 22 Javascript
javascript针对DOM的应用实例(一)
Apr 15 Javascript
浅谈JavaScript中Date(日期对象),Math对象
Feb 05 Javascript
Bootstrap中datetimepicker使用小结
Dec 28 Javascript
100多个基础常用JS函数和语法集合大全
Feb 16 Javascript
运用jQuery写的验证表单(实例讲解)
Jul 06 jQuery
AngularJS 实现点击按钮获取验证码功能实例代码
Jul 13 Javascript
iscroll.js滚动加载实例详解
Jul 18 Javascript
谈谈VUE种methods watch和compute的区别和联系
Aug 01 Javascript
Vue2.0权限树组件实现代码
Aug 29 Javascript
vue实现通讯录功能
Jul 14 Javascript
jquery添加div实现消息聊天框
Feb 08 jQuery
基于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
轻松修复Discuz!数据库
2008/05/03 PHP
php 随机生成10位字符代码
2009/03/26 PHP
完美解决PHP中文乱码
2009/11/26 PHP
php获取文件名后缀常用方法小结
2015/02/24 PHP
简单了解WordPress开发中update_option()函数的用法
2016/01/11 PHP
php解析base64数据生成图片的方法
2016/12/06 PHP
一个基于jquery的文本框记数器
2012/09/19 Javascript
方便实用的jQuery checkbox复选框全选功能简单实例
2013/10/09 Javascript
纯js和css实现渐变色包括静态渐变和动态渐变
2014/05/29 Javascript
jQuery获取iframe的document对象的方法
2014/10/10 Javascript
web前端设计师们常用的jQuery特效插件汇总
2014/12/07 Javascript
js实现键盘上下左右键选择文字并显示在文本框的方法
2015/05/07 Javascript
以WordPress为例讲解jQuery美化页面Title的方法
2016/05/23 Javascript
js鼠标单击和双击事件冲突问题的快速解决方法
2016/07/11 Javascript
jquery.multiselect多选下拉框实现代码
2016/11/11 Javascript
使用百度地图实现地图网格的示例
2018/02/06 Javascript
Vue + better-scroll 实现移动端字母索引导航功能
2018/05/07 Javascript
vue-cli 首屏加载优化问题
2018/11/06 Javascript
详解a标签添加onclick事件的几种方式
2019/03/29 Javascript
在vue项目实现一个ctrl+f的搜索功能
2020/02/28 Javascript
在python中实现强制关闭线程的示例
2019/01/22 Python
PyCharm 2020.2 安装详细教程
2020/09/25 Python
HTML5 canvas实现移动端上传头像拖拽裁剪效果
2016/03/14 HTML / CSS
美国智能家居专家:tink
2019/06/04 全球购物
房地产出纳岗位职责
2013/12/01 职场文书
函授大学生自我鉴定
2014/02/05 职场文书
采购经理岗位职责
2014/02/16 职场文书
大学竞选班长演讲稿
2014/04/24 职场文书
产品售后服务承诺书
2014/05/21 职场文书
小学生迎国庆演讲稿
2014/09/05 职场文书
2015年社区环境卫生工作总结
2015/04/21 职场文书
酒店圣诞节活动总结
2015/05/06 职场文书
消夏晚会主持词
2015/06/30 职场文书
在CSS中映射鼠标位置并实现通过鼠标移动控制页面元素效果(实例代码)
2021/04/22 HTML / CSS
Python IO文件管理的具体使用
2022/03/20 Python
Python闭包的定义和使用方法
2022/04/11 Python