一次 Vue 低版本安卓白屏问题的解决过程
栏目: JavaScript · 发布时间: 5年前
内容简介:因为业务需要一定要使用安卓4.4的webview浏览页面,测试的时候发生了白屏问题,很自然想到使用babel转换部分ES6语法.但结果还是白屏,那么决定使用Babel把语法转换成安卓4.4以上,应该没有问题了。结果还是白屏,查阅众多网络文章,同样没有很好的答案...
因为业务需要一定要使用安卓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:
所以说不同运行环境的严格模式还是会有不一样的结果,
在网上查了下资料总结了严格模式下的几种错误:
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();
以上所述就是小编给大家介绍的《一次 Vue 低版本安卓白屏问题的解决过程》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- Rust 1.30 版本发布,"过程宏"已可用
- Rust 1.30 版本发布,"过程宏"已可用
- 在CentOS 7系统下升级 Jenkins版本(含排坑过程)
- ObjectiveSQL 1.3.6 版本发布,过程化 SQL 编程&等价表达式
- EventBus 1.0.1版本源码分析及一步一步自实现过程
- 存储过程 – 重新编译后,存储过程运行得很快
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。