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

前端  /  管理员 发布于 4年前   1123

因为业务需要一定要使用安卓4.4的webview浏览页面，测试的时候发生了白屏问题，很自然想到使用babel转换部分ES6语法.

Babel 转换 Promise 和 Symbol ES6语法的配置

# 两项都需要放到生产依赖npm install babel-polyfill --savenpm install es6-promise --save

// main.jsimport 'babel-polyfill';import Es6Promise from 'es6-promise';Es6Promise.polyfill();

// babel.config.jsprocess.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.jsmodule.exports = { transpileDependencies: ['webpack-dev-server/client'], chainWebpack: (config) => { config.entry.app = ['babel-polyfill', './src/main.js']; }}

但结果还是白屏，那么决定使用Babel把语法转换成安卓4.4以上，应该没有问题了。

// .browserslistrc>= 1%last 1 major versionnot deadAndroid >= 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文件里将其格式化后发现是组件的属性重复定义了,

我的项目里 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 项目白屏解决方案
• 解决vue build打包之后首页白屏的问题
• 浅谈vue首屏加载优化
• 浅谈VUE单页应用首屏加载速度优化方案
• Vue防止白屏添加首屏动画的实例