vue-cli3安装babel-polyfill后,IE/安卓5.1等低版本页面仍然空白

前面可能跟大家一样,按照网上最普遍的方法,进行了安装和配置:

  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'
				]
			}
		]
	]
}
  1. 修改 vue.config.js
module.exports = {
	transpileDependencies: ['webpack-dev-server/client'],
    chainWebpack: config => {
    	config.entry.app = ['@babel/polyfill', './src/main.js'];
    }
}

4.修改 main.js 文件

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

require('es6-promise').polyfill()
Es6Promise.polyfill()
  1. 安装依赖
npm install --save-dev @babel/core @babel/plugin-transform-runtime @babel/preset-env es6-promise @babel/polyfill babel-plugin-transform-remove-console

按照网上的说法,到这里为止,IE页面空白问题就已经解决了,但是,我的项目在IE和安卓低版本上打开仍然是空白,查了很多方法,试了很多方法都不管用,最终在茫茫大海中,捞到了一位大神,在此附上原po,以表敬意
https://blog.csdn.net/Maggie_01/article/details/101159448

上解决方法:
修改vue.config.js
这里通过add方法,配置babel需要另外转换的文件

const path = require('path');

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

module.exports = {
  ...  // 其他配置
  publicPath: process.env.NODE_ENV === "production" ? "./" : "./",
  // 默认情况下 babel-loader 会忽略所有 node_modules 中的文件。
  // 如果你想要通过 Babel 显式转译一个依赖,可以在这个选项中列出来
  transpileDependencies: ['node_modules/webpack-dev-server/client'],
  chainWebpack: config => {
    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
          }]
        ]
      });
  }
}

至此,IE、安卓5.1、安卓6.0上页面都能正常访问了

你可能感兴趣的:(踩坑小记,vue,安卓,babel)