vue-cli3/4项目在安卓低版本显示空白页兼容性问题

问题描述：最近项目的监控大屏要在客户TV（安卓5.1）上展示，但是打开链接显示白屏，啥错都没有；经过多方查找、分析，确认应该是安卓系统版本的原因，目前已知的是Android 6.0 以上都 OK，6.0 以下就不行了。

低版本安卓系统内置的 webview 不支持 ES6 语法等一些新特性，所以报错。但在手机上调试不方便，受一篇文章的启发， IE 浏览器也是同样的问题，所以可以在 IE 上调试，一个调好了两个就都好了。突然发现万恶的 IE 还是有点用的…

附上方案之前，首先感谢Cheri Chang，原理没问题，不过要针对自己出现的特殊问题稍作修改，以下是我的配置流程：
1、根目录下新建 .babelrc 文件

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

2.修改 babel.config.js

module.exports = {
	presets: [
		[
			'@vue/app',
			{
				useBuiltIns: 'entry',
				polyfills: [
					'es6.promise',
					'es6.symbol'
				]
			}
		]
	]
}

3、修改 main.js 文件，导入依赖

import '@babel/polyfill'
import Es6Promise from 'es6-promise'

require('es6-promise').polyfill()
Es6Promise.polyfill()

4、配置vue.config.js

const path = require('path');

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

module.exports = {
  ...  // 其他配置
    
  // 默认情况下 babel-loader 会忽略所有 node_modules 中的文件。
  // 如果你想要通过 Babel 显式转译一个依赖，可以在这个选项中列出来
  // 重要
  transpileDependencies: ['node_modules/webpack-dev-server/client'],
  chainWebpack: config => {
    //重要
    config.entry.app = ['@babel/polyfill', './src/main.js']
      
    //重要：通过add方法，配置babel需要另外转换的文件
    config.module.rule('compile')
      .test(/\.js$/)
      .include
      .add(resolve('src'))
      .add(resolve('test'))
      .add(resolve('static'))
      .add(resolve('node_modules/webpack-dev-server/client'))
      .add(resolve('node_modules'))
      .end()
      .use('babel')
      .loader('babel-loader')
      .options({
        presets: [
          ['@babel/preset-env', {
            modules: false
          }]
        ]
      });
  }
}

5、安装依赖

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

按照此流程最起码解决了我刚开始的报错问题，但是依然显示不了；浏览器控制台显示app.js里面的一个报错，不过看着也像是es6没有转换的问题，抱着尝试的心态，在项目中搜索了下app.js，在src\store\modules下找到，将其加入到babel-loader转换的列表,故本人的vue.config.js配置如下（标注“本人配置”是新增配置）：

const path = require('path');

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

module.exports = {
  ...  // 其他配置
    
  // 默认情况下 babel-loader 会忽略所有 node_modules 中的文件。
  // 如果你想要通过 Babel 显式转译一个依赖，可以在这个选项中列出来
  // 重要
  transpileDependencies: ['node_modules/webpack-dev-server/client'],
  chainWebpack: config => {
    //重要
    config.entry.app = ['@babel/polyfill', './src/main.js']
      
    //重要：通过add方法，配置babel需要另外转换的文件
    config.module.rule('compile')
      .test(/\.js$/)
      .include
      .add(resolve('src'))
	  .add(resolve('src/store/modules'))  //本人配置
      .add(resolve('tests')) 
      .add(resolve('mock'))               //本人配置
	  .add(resolve('build'))              //本人配置
	  .add(resolve('plop-templates'))     //本人配置
	  .add(resolve('public'))             //本人配置
      .add(resolve('static'))
      .add(resolve('node_modules/webpack-dev-server/client'))
      .add(resolve('node_modules'))
      
      .end()
      .use('babel')
      .loader('babel-loader')
      .options({
        presets: [
          ['@babel/preset-env', {
            modules: false
          }]
        ]
      });
  }
}

此时本地npm run dev，安卓4.4.2(TV)、5.0及以上系统均可展示；

不过在发布到测试环境和线上环境时，发现没有生效，主要问题在第5步安装依赖，npm时使用–save-dev只会将依赖保存到package.json的devDependencies中，只有开发环境才有效，其他环境无效；故将命令修改为以下命令：

# 如果知道依赖的确切版本，可以直接配置到package.json的dependencies中
npm install --save @babel/core @babel/plugin-transform-runtime @babel/preset-env es6-promise @babel/polyfill 

#  To install it, you can run: npm install --save -- 
#  @babel/runtime/helpers/createForOfIteratorHelper 
#  如果上一步没有报缺少该依赖，可以不要
npm install –save @babel/runtime 

此时安装完成后，直接打包发布即可；

如果在安装过程中出现报错，可以删除原有的node_modules、package-lock.json文件后，在package.json的dependencies中手动配置上面几个依赖，直接npm install即可

"@babel/core": "^7.12.10",
"@babel/plugin-transform-runtime": "^7.12.10",
"@babel/polyfill": "^7.12.1",
"@babel/preset-env": "^7.12.11",
"@babel/runtime": "^7.12.5",
"es6-promise": "^4.2.8",

–save-dev说明：

--save || -S // 运行依赖（发布）
–save-dev || -D //开发依赖（辅助）

区别是它们会把依赖包添加到package.json 文件

–save ： dependencies 键下，发布后还需要依赖的模块，譬如像jQuery库或者Angular框架类似的，我们在开发完后后肯定还要依赖它们，否则就运行不了。
(1)尽量还是使用此命令，因为一般情况下，我们线上也需要同样的依赖
(2)使用此命令安装后，会在package.json中dependencies新增依赖项，如果我们知道依赖项确切版本，也可以直接到json文件添加，以后在打包时，直接npm install即可

–save-dev ： devDependencies 键下，开发时的依赖比如安装 js的压缩包gulp-uglify 因为我们在发布后用不到它，而只是在我们开发才用到它。