详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决_JavaScript

最近遇到一个问题，用 Vue 开发的项目在最近两年新出的安卓手机上没问题，在三四年前的旧手机上出现白屏问题。分析一下应该是安卓系统版本的原因，目前已知的是Android 6.0 以上都 OK，6.0 以下就不行了。

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

网上的文章大部分是 Vue-cli 2.x 版本的解决方案，但 Vue-cli 3 跟之前的版本还是有很大差异的，可能是我比较菜，看了 n 篇文章还是不知道怎么配置。经过努力，终于梳理出了基于 Vue-cli 3 的项目如何做兼容性配置的步骤：

1. 根目录下新建 .babelrc 文件

在项目根目录下新建 .babelrc 文件，跟 package.json 同级。将以下代码复制到 .babelrc 文件中

				?

									{

									 "presets": ["@babel/preset-env"],

									 "plugins": [

									  "@babel/plugin-transform-runtime"

									 ]

									}

2. 修改 babel.config.js

将以下代码复制到 babel.config.js 文件中，其中最上面四行是打包时删除 console 的配置，如不需要可以删除。

				?

									const plugins = [];

									if (['production', 'prod'].includes(process.env.NODE_ENV)) {

									 plugins.push("transform-remove-console")

									}

									module.exports = {

									 presets: [

									  [

									   "@vue/app",

									   {

									    "useBuiltIns": "entry",

									    polyfills: [

									     'es6.promise',

									     'es6.symbol'

									    ]

									   }

									  ]

									 ],

									 plugins: plugins

									};

3. 修改 vue.config.js

用 vue-cli 3 新建项目时，默认是没有这个配置文件的，没有则在项目根目录下新建一个 vue.config.js ，也是跟 package.json 同级。

解决白屏问题需要添加的代码：

				?

									module.exports = {

									 transpileDependencies: ['webpack-dev-server/client'],

									 chainWebpack: config => {

									  config.entry.app = ['babel-polyfill', './src/main.js'];

									 }

									}

4. 修改 main.js 文件

找到项目根目录/src/main.js ，添加以下代码

				?

									import '@babel/polyfill';

									import Es6Promise from 'es6-promise'

									Es6Promise.polyfill()

5. 安装依赖

在根目录下执行以下语句。如果在第二步不需要配置生产环境删除 console 可以不要最后一个 babel-plugin-transform-remove-console 。

				?

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

以上五步配置完就可以解决 Vue 项目在低版本安卓系统和 IE 浏览器下显示空白的问题了。

附完整的 vue.config.js

				?

									const path = require('path')

									const resolve = dir => path.resolve(__dirname, dir)

									const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV)

									const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

									const CompressionWebpackPlugin = require('compression-webpack-plugin');

									const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;

									module.exports = {

									 transpileDependencies: ['webpack-dev-server/client'],

									 // 基本路径

									 // baseUrl: './',

									 publicPath: './',

									 // 输出文件目录

									 outputDir: 'dist',

									 // eslint-loader 是否在保存的时候检查

									 lintOnSave: false,

									 assetsDir: '', // 相对于outputDir的静态资源(js、css、img、fonts)目录

									 runtimeCompiler: true, // 是否使用包含运行时编译器的 Vue 构建版本

									 // 生产环境是否生成 sourceMap 文件

									 productionSourceMap: false,

									 chainWebpack: config => {

									  config.entry.app = ['babel-polyfill', './src/main.js'];

									  // 修复HMR

									  config.resolve.symlinks(true);

									  //修复 Lazy loading routes Error

									  config.plugin('html').tap(args => {

									   args[0].chunksSortMode = 'none';

									   return args;

									  });

									  // 添加别名

									  config.resolve.alias

									   .set('@', resolve('src'))

									   .set('assets', resolve('src/assets'))

									   .set('components', resolve('src/components'))

									   .set('layout', resolve('src/layout'))

									   .set('base', resolve('src/base'))

									   .set('static', resolve('src/static'));

									  //压缩图片

									  config.module

									   .rule("images")

									   .use("image-webpack-loader")

									   .loader("image-webpack-loader")

									   .options({

									    mozjpeg: {progressive: true, quality: 65},

									    optipng: {enabled: false},

									    pngquant: {quality: "65-90", speed: 4},

									    gifsicle: {interlaced: false},

									    webp: {quality: 75}

									   });

									  // 打包分析

									  if (process.env.IS_ANALYZ) {

									   config.plugin('webpack-report')

									    .use(BundleAnalyzerPlugin, [{

									     analyzerMode: 'static',

									    }]);

									  }

									 },

									 configureWebpack: config => {

									  if (IS_PROD) {

									   const plugins = [];

									   //开启 gzip 压缩

									   plugins.push(

									    new CompressionWebpackPlugin({

									     filename: '[path].gz[query]',

									     algorithm: 'gzip',

									     test: productionGzipExtensions,

									     threshold: 10240,

									     minRatio: 0.8

									    })

									   );

									   config.plugins = [

									    ...config.plugins,

									    ...plugins

									   ];

									  }

									 },

									 // css相关配置

									 css: {

									  extract: true,

									  sourceMap: false,

									  loaderOptions: {},

									  modules: false

									 },

									 parallel: require('os').cpus().length > 1,

									 pwa: {},

									 devServer: {

									  open: process.platform === 'darwin',

									  host: '0.0.0.0',

									  port: 8080,

									  https: false,

									  hotOnly: false,

									  proxy: null, // 设置代理

									  before: app => {

									  }

									 },

									 // 第三方插件配置

									 pluginOptions: {}

									};