APP内嵌h5页面在android低版本出现白屏问题(vue项目)

前段时间在处理一个vue项目时, 在vivo和华为的android5.0系统出现白屏,没有任何报错信息, 之后特地买了两台真机进行测试, 经过分段调试 , 一步步排查, 最后发现是这段代码出错:

到底什么问题? 对比一下这段代码

很明显, 参数默认值的问题! 也就是ES6语法不兼容!
但实际上不完全是, 在这个项目中,有不少类似箭头函数这种语法, 通通都是支持的.实际上项目中是有babel进行转码.

那到底是怎么回事呢?

我们都知道,babel是一个转译器，可以把同种语言的高版本规则翻译成低版本规则, 一般在项目根目录下会有一个 .babelrc 文件, 用于默认解析 ES2015(es6) 中的特殊语法, 像 let,const, => 等等;

而babel默认只转换新的JavaScript句法（syntax），而不转换新的API，比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象，以及一些定义在全局对象上的方法（比如Object.assign）都不会转码。
所以需要使用 babel-polyfill，为当前环境提供一个垫片，需要在Webpack中配置babel-loader。

具体操作如下:

1. 如果没有安装babel转码规则,需要先安装,

ES2015转码规则
npm install --save-dev babel-preset-es2015

ES6+不同阶段语法提案的转码规则（共有4个阶段），选装一个就可以了
$ npm install --save-dev babel-preset-stage-0
$ npm install --save-dev babel-preset-stage-1
$npm install --save-dev babel-preset-stage-2

配置babel转码规则, .babelrc文件如下:

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": ["transform-vue-jsx", "transform-runtime"],
  "env": {
    "test": {
      "presets": ["env", "stage-2"],
      "plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs", "dynamic-import-node"]
    }
  }
}

2.安装babel-polyfill

npm install --save-dev babel-polyfill

在入口文件main.js中引入

import babel-polyfill	

在build文件的webpack.base.conf.js文件下修改入口:

3.配置"babel-loader"

npm install -D babel-loader@7 babel-core babel-preset-env webpack

在package.json文件中的devDependencies{}同级中, 添加代码:

  "babel": {
    "presets": [
      "env"
    ],
    "plugins": []
  }

在webpack的webpack.base.config.js文件中, 添加如下代码:

{
   test: /\.js$/,
   loader: 'babel-loader',
   include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
 },

到这就可以了, 完美解决.

扩展:

1. npm run build打包页面空白

原因: 路径错误
解决: 文件：把assetsPublicPath: '/'改为assetsPublicPath: ‘./’

build: {
assetsPublicPath: ‘./’,
}

2.Vue在IE、低版本Android显示空白问题

原因: IE对promise的支持不好
解决: 安装：babel-polyfill和es6-promise:

	npm install babel-polyfill
	npm install es6-promise

然后在main.js文件中引用:

import 'babel-polyfill'
import Vue from 'vue'
import Es6Promise from 'es6-promise'
Es6Promise.polyfill()

最后 build/webpack.base.conf.js 文件中配置如下：

module.exports = {
entry: {
app: [“babel-polyfill”, “./src/main.js”]
} };

3. IE不支持 Promise 解决办法

引入 <script src = "https://cdn.polyfill.io/v2/polyfill.min.js"></script>
或 <script type="text/javascript" src ="https://cdn.polyfill.io/v2/polyfill.min.js?features=es6"></script>

4.解决方法是在项目根目录下新建一个文件vue.config.js，在里面添加如下语句：

module.exports = { chainWebpack: config => {
config.rule(‘js’).include.add(/node_modules/(dom7|swiper)/.*/) } }

5.升级vue2+部分手机访问出现页面空白

npm run dev后可能出现无法加载到路由模板的信息。

解决：config/index.js文件：

把 devtool: ‘#eval-source-map’ 改为devtool:‘inline-source-map’

6.升级vue2+IP访问页面空白

默认只能通过localhost或者127.0.0.1才能访问，如果使用本机的Ip地址会出现无法访问到的情况。

解决：config/index.js文件：

把config/index.js中“host” 配置为“0.0.0.0”就可以解决，或者设置为你电脑的IP地址也行.