详解一次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向flash swf文件传递参数值注意细节
Dec 11 Javascript
一个JavaScript变量声明的知识点
Oct 28 Javascript
jquery-syntax动态语法着色示例代码
May 14 Javascript
jQuery检测输入的字符串包含的中英文的数量
Apr 17 Javascript
JS模拟Dialog弹出浮动框效果代码
Oct 16 Javascript
jQuery AJAX timeout 超时问题详解
Jun 21 Javascript
AngularJS基础 ng-srcset 指令简单示例
Aug 03 Javascript
jQuery实现可展开折叠的导航效果示例
Sep 12 Javascript
jQuery插件DataTables分页开发心得体会
Aug 22 jQuery
vue项目打包部署到服务器的方法示例
Aug 27 Javascript
JS异步执行结果获取的3种解决方式
Feb 19 Javascript
Vue中使用JsonView来展示Json树的实例代码
Nov 16 Javascript
基于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
分享一个PHP数据流应用的简单例子
2012/06/01 PHP
ThinkPHP中ajax使用实例教程
2014/08/22 PHP
PHP获取数组长度或某个值出现次数的方法
2015/02/11 PHP
yii框架结合charjs统计上一年与当前年数据的方法示例
2020/04/04 PHP
WordPress JQuery处理沙发头像
2009/06/22 Javascript
jQuery 使用手册(五)
2009/09/23 Javascript
jQuery jqgrid 对含特殊字符json 数据的 Java 处理方法
2011/01/01 Javascript
JavaScript高级程序设计(第3版)学习笔记10 再访js对象
2012/10/11 Javascript
让table变成exls的示例代码
2014/03/24 Javascript
JavaScript实现Flash炫光波动特效
2015/05/14 Javascript
两款JS脚本判断手机浏览器类型跳转WAP手机网站
2015/10/16 Javascript
详解AngularJS中$http缓存以及处理多个$http请求的方法
2016/02/06 Javascript
EditPlus 正则表达式 实战(3)
2016/12/15 Javascript
nodejs个人博客开发第一步 准备工作
2017/04/12 NodeJs
在百度搜索结果中去除掉一些网站的资料(通过js控制不让显示)
2017/05/02 Javascript
JavaScrpt的面向对象全面解析
2017/05/09 Javascript
vue使用keep-alive实现数据缓存不刷新
2017/10/21 Javascript
用React实现一个完整的TodoList的示例代码
2017/10/30 Javascript
浅谈vue首屏加载优化
2018/06/28 Javascript
对angular4子路由&amp;辅助路由详解
2018/10/09 Javascript
解决Vue的项目使用Element ui 走马灯无法实现的问题
2020/08/03 Javascript
[16:21]教你分分钟做大人:圣堂刺客
2014/12/03 DOTA
pyv8学习python和javascript变量进行交互
2013/12/04 Python
Python字符串处理之count()方法的使用
2015/05/18 Python
python游戏开发之视频转彩色字符动画
2019/04/26 Python
Ubuntu18.04下python版本完美切换的解决方法
2019/06/14 Python
python打包exe开机自动启动的实例(windows)
2019/06/28 Python
Python参数类型以及常见的坑详解
2019/07/08 Python
python实现飞船大战
2020/04/24 Python
canvas 下载二维码和图片加水印的方法
2018/03/21 HTML / CSS
意大利领先的线上奢侈品销售电商:Eleonora Bonucci
2017/10/17 全球购物
Auguste The Label官网:澳大利亚一家精品女装时尚品牌
2020/06/14 全球购物
上学迟到的检讨书
2014/01/11 职场文书
公司会计岗位职责
2014/02/13 职场文书
搞笑车尾标语
2014/06/23 职场文书
团支部组织委员竞选稿
2015/11/21 职场文书