Recently, I met a problem. The project developed with Vue has no problem on the new Android phones in the last two years, but the problem of white screen appeared on the old phones three or four years ago. Analysis should be Android system version of the reason, currently known is Android 6.0 above all OK, 6.0 below not.

The webView built into the earlier Version of Android does not support some new features such as ES6 syntax, so an error is reported. But on the phone debugging is not convenient, inspired by an article, IE browser is the same problem, so you can debug in IE, a good tuning of two are good. Suddenly found the evil IE or a bit of use…

Most of the articles on the Internet are vuE-CLI 2.x version of the solution, but vuE-CLI 3 is still very different from the previous version, maybe I am a bit of a comparison, read n articles still do not know how to configure. After efforts, the steps of how to do compatibility configuration based on VUE-CLI 3 are finally sorted out:

1. Create a directory in the root directory.babelrcfile

Create a new.babelrc file in the project root directory, the same level as package.json. Copy the following code into the.babelrc file

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

2. Modifybabel.config.js

Copy the following code into the babel.config.js file, the top four lines of which are the configuration to remove the console at package time, if you don’t need it.

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 }; Copy the codeCopy the code

3. Modifyvue.config.js

When creating a project using vue-cli 3, you will not have this configuration file by default. If you do not have this configuration file, you will create a new vue.config.js file in the project root directory, which is the same as package.json.

Add code to solve the white screen problem:

module.exports = { transpileDependencies: ['webpack-dev-server/client'], chainWebpack: config => { config.entry.app = ['babel-polyfill', './src/main.js']; }} Copy the codeCopy the code

4. Modifymain.jsfile

Go to the project root directory/SRC /main.js and add the following code

import'@babel/polyfill'; Import Es6Promise from' ES6 - Promise 'es6promise.polyfill () copies the codeCopy the code

5. Install dependencies

Execute the following statement in the root directory. If you do not need to configure the production environment in step 2 to delete the console, you can omit the last 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 copy codeCopy the code

After the above five steps are configured, you can solve the problem that the Vue project displays blank in the lower version of Android system and Internet Explorer.

Attach a completevue.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: './', // Output file directory outputDir: 'dist', // eslint-loader checks lintOnSave: false, assetsDir: // Static resources (js, CSS, img, fonts) directory relative to outputDir runtimeCompiler: True, // Whether to use the Vue build containing the runtime compiler // Whether the production environment generates sourceMap file productionSourceMap: false, chainWebpack: config => { config.entry.app = ['babel-polyfill', './src/main.js']; // Fix HMR config.resolve.symlinks(true); // Fix Lazy loading routes Error config.plugin(' HTML ').tap(args => {args[0]. ChunksSortMode = 'none'; return args; }); 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 = []; Push (new CompressionWebpackPlugin({filename: '[path].gz[query]', algorithm: 'gzip', test: ProductionGzipExtensions, threshold: 10240, minRatio: 0.8})); config.plugins = [ ...config.plugins, ...plugins ]; }}, // CSS related configuration CSS: {extract: true, sourceMap: false, loaderOptions: {}, modules: false}, parallel: Require (' OS ').length ().length > 1, pwa: {}, devServer: {open: process.platform === 'Darwin ', host: '0.0.0.0', port: 8080, HTTPS: false, hotOnly: false, proxy: null, // set proxy before: app => {}}, // configure pluginOptions: {}}; Copy the codeCopy the code

There are several dependencies cited here, and if you get an error, follow the instructions to install the corresponding dependencies.

fromThe white screen of vuE-CLI3 project on android and IE was solved