vue项目在安卓5系统兼容性问题；解决vue项目在安卓5系统白屏问题

解决vue项目在安卓5系统白屏问题，把项目中的es6及更高的语法转化为es5

先引入依赖包

npm install @babel/core @babel/plugin-transform-runtime @babel/preset-env babel-plugin-transform-remove-console babel-polyfill es6-promise --S

1、新建.babelrc文件

{
    "presets": [
        [
          "@babel/preset-env",
          {
            "targets": {
              "ie": 10
            }
          }
        ]
      ],
    "plugins": [
      "@babel/plugin-transform-runtime"
    ]
  }

2、修改babel.config.js文件

 
module.exports = {
  presets: [
    [
      "@vue/app",
      {
        "useBuiltIns": "entry",
        polyfills: [
          'es6.promise',
          'es6.symbol',
          "es6.array.iterator",
          "es6.object.assign",
          "es6.let",
          "es6.const",
          "es6.class",
          "es6.function"
        ]
      }
    ]
  ]
};
+};

3、修改vue.config.js文件

function resolve(dir) {
	return path.join(__dirname, '.', dir);
}

module.exports = {
	transpileDependencies: [],
	chainWebpack: config => {
		// 入口文件转化为es5
		config.entry.app = ['babel-polyfill', './src/main.js'];
		config.module.rule('compile')
			.test(/\.js$/)
			.include
			.add(resolve('src'))
			.add(resolve('node_modules')) // node_modules文件都转化为es5语法
			// .add(resolve('vue-awesome-swiper'))
			.end()
			.use('babel')
			.loader('babel-loader')
			.options({
				presets: [
				['@babel/preset-env', {
					modules: false
				}]
				]
			});
	},
}

4、main.js文件中引入依赖包

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

以上操作，基本就把打包后的文件都转为es5语法了。

但是，在我的项目中，依然还存在白屏的问题，最后发现，注释掉main.js引入的vconsole包和初始化方法，白屏问题就解决了，真的是无语。