详解一次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获取距今n天前的日期
Jul 08 Javascript
Angular ng-class详解及实例代码
Sep 19 Javascript
最实用的jQuery分页插件
Oct 09 Javascript
bootstrap制作jsp页面(根据值让table显示选中)
Jan 05 Javascript
js封装成插件的步骤方法
Sep 11 Javascript
JavaScript树的深度优先遍历和广度优先遍历算法示例
Jul 30 Javascript
jquery+css实现Tab栏切换的代码实例
May 14 jQuery
vue进入页面时不在顶部,检测滚动返回顶部按钮问题及解决方法
Oct 30 Javascript
如何在微信小程序中存setStorage
Dec 13 Javascript
Vue.js 中制作自定义选择组件的代码附演示demo
Feb 28 Javascript
基于postman获取动态数据过程详解
Sep 08 Javascript
js实现随机圆与矩形功能
Oct 29 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
拼音码表的生成
2006/10/09 PHP
php实现refresh刷新页面批量导入数据的方法
2014/12/23 PHP
PHP 500报错的快速解决方法
2016/12/14 PHP
PHP读取文件,解决中文乱码UTF-8的方法分析
2020/01/22 PHP
javascript两段代码,两个小技巧
2010/02/04 Javascript
JQuery Study Notes 学习笔记(一)
2010/08/04 Javascript
js两行代码按指定格式输出日期时间
2011/10/21 Javascript
TimergliderJS 一个基于jQuery的时间轴插件
2011/12/07 Javascript
NODE.JS加密模块CRYPTO常用方法介绍
2014/06/05 Javascript
一个判断抢购时间是否到达的简单的js函数
2014/06/23 Javascript
js变形金刚文字特效代码分享
2015/08/20 Javascript
JS设置下拉列表框当前所选值的方法
2015/12/22 Javascript
React实现双向绑定示例代码
2016/09/19 Javascript
AngularJS中的DOM操作用法分析
2016/11/04 Javascript
vue路由组件按需加载的几种方法小结
2018/07/12 Javascript
详解在微信小程序的JS脚本中使用Promise来优化函数处理
2019/03/06 Javascript
vue中组件的3种使用方式详解
2019/03/23 Javascript
Vue入门学习笔记【基本概念、对象、过滤器、指令等】
2019/04/13 Javascript
vue-property-decorator用法详解
2019/12/12 Javascript
基于原生js实现九宫格算法代码实例
2020/07/03 Javascript
使用typescript快速开发一个cli的实现示例
2020/12/09 Javascript
[01:36:57]【09DOTA2第一视角】小骷髅
2014/04/16 DOTA
[54:06]OG vs TNC 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python中模块pymysql查询结果后如何获取字段列表
2017/06/05 Python
python 获取list特定元素下标的实例讲解
2018/04/09 Python
详解python异步编程之asyncio(百万并发)
2018/07/07 Python
Python描述数据结构学习之哈夫曼树篇
2020/09/07 Python
Python利用pip安装tar.gz格式的离线资源包
2020/09/14 Python
如何用Python和JS实现的Web SSH工具
2021/02/23 Python
美国最大的珠宝首饰网上商城:Jewelry.com
2016/07/22 全球购物
Banggood官网:面向全球客户的综合商城
2017/04/19 全球购物
社团文化节策划书
2014/02/01 职场文书
节能标语大全
2014/06/21 职场文书
班主任2015新年寄语
2014/12/08 职场文书
goland设置颜色和字体的操作
2021/05/05 Golang
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
2022/08/05 Vue.js