vue-cli2、vue-cli3配置babel 兼容低版本安卓5.0

背景：最近在做溯源项目，使用了vue-cli3构建的项目，但是在IE中打开空白，其他浏览器打开正常，为了解决此问题，安装了babel-polyfill，在main.js文件中通过import "babel-polyfill"引入了该文件，但还是没有解决此问题，搜索了好久，终于找到了一篇文章解决了我的问题，很激动，很感谢，附上原文章https://blog.csdn.net/Maggie_01/article/details/101159448，自己也做下笔记。

空白原因：

浏览器不兼容ES6语法，需要将代码中的ES6语法通过插件的方式进行转换，而且由于babel会忽略node_modules，导致依赖包中的ES6语法无法被转换

解决方法：

步骤一：安装相关插件

npm install babel-polyfill es6-promise --save

步骤二：main.js中引入，并配置

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

注意：针对vue-cli2和vue-cli3，步骤一、步骤二相同，下面步骤有区分

步骤三：vue-cli2项目，创建一个.babelrc文件

复制代码

{
  "presets": [
    "es2015" ,
    "stage-2"
  ],
  "plugins": [
    "transform-vue-jsx", 
    "transform-runtime",
    ["import", [{ "libraryName": "vant", "style": true }]]
  ],
}

复制代码

步骤四：vue-cli2项目，更改webpack.base.conf.js文件配置

复制代码

const path = require('path')

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

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: ["babel-polyfill", "./src/main.js"]
    // app: './src/main.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        // include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
        query: {
          presets: ['es2015']
        },
        include: [
          resolve('src'), 
          resolve('static/js'), 
          resolve('test'), 
          resolve('node_modules/webpack-dev-server/client'),
          resolve('node_modules/vant')
        ]
      },
    ]
  }
}

复制代码

步骤三：vue-cli3项目，新建一个babel的配置文件，babel.config.js

复制代码

var 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
}

复制代码

transform-remove-console是用来在打包之前删除控制台打印，不需要的可以去掉

步骤四：vue-cli3项目，更改vue.config.js

复制代码

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: [],
  chainWebpack: config => {
    config.module.rule('compile')
      .test(/\.js$/)
      .include
      .add(resolve('src'))
      .add(resolve('test'))
      .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
          }]
        ]
      });
  }
}

复制代码

重启项目，至此因为低版本不支持es6导致页面空白的问题解决了。

说明：vue-cli2项目的方法我没有测试，因为我的项目是vue-cli3.

生活中不可能到处顺利，包括工作！