欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-01-11 13:01:41
因为业务需要一定要使用安卓4.4的webview浏览页面,测试的时候发生了白屏问题,很自然想到使用babel转换部分es6语法. babel 转换 promise 和 s...

因为业务需要一定要使用安卓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();

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