Ie page blank

Error message

  The page is blank

Error reporting reason

Babel only converts new JavaScript syntax (such as arrow functions) by default, rather than new APIs, such as iterator, generator, set, maps, proxy, reflect, symbol, promise and other new objects or methods

For example, promise, new native methods such as string. Padstart (left pad), etc. To solve this problem, we use a technology called Polyfill

In short, the compatibility problem is that ie does not support the syntax of some new objects and expressions in ES6. The solution is to use Babel Polyfill to use ES6 normally

What is Polyfill

For example, some old browsers do not support the number.isnan method. Polyfill can be as follows:

if(!Number.isNaN) {
    Number.isNaN = function(num) {
        return(num !== num);
    }
}

Polyfill solves the API compatibility problem in a similar way

Solution

1. Using Babel Polyfill

Introducing Babel Polyfill  

npm i -S babel-polyfill

How to use

It needs to be introduced at the top of your application’s entry point or in the packaging configuration

Introduce in main.js

import 'babel-polyfill'

Or modify the configuration in webpack.base.conf.js in config

entry:{
    app:['babel-polyfill','./src/main.js']      
}

2. Add the following code to index.html (not required)

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

3. Module transcoding specified in Babel loader

Whether poly fill is added or an error is reported. Generally, third-party UI frameworks, libraries and plug-ins are used, and the underlying syntax of these UI frameworks, libraries and plug-ins is ES6

Locate the Babel loader in webpack.base.conf.js

For example, I use element UI and v-charts here   Amend to read as follows:

 {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [
          resolve('src'),
          resolve('test'),
          resolve('node_modules/webpack-dev-server/client'),
          resolve('node_modules/v-charts/src'),
          resolve('node_modules/vue-awesome'),
          resolve('node_modules/element-ui/packages'),
          resolve('node_modules/element-ui/src')
        ]
}

4. Packaging problem

If there is a webpack code packaging error, generally go to GitHub webpack issues  

{
  "presets": [
    ["env", {
      "modules": false,
      "useBuiltIns": "entry"
    }],
    "stage-2"
  ],
  "plugins": ["transform-runtime", "transform-vue-jsx"],
  "env": {
    "test": {
      "presets": ["env", "stage-2"],
      "plugins": ["istanbul"]
    }
  }
}