Vue compatible ie error reporting solution

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  

This error is due to the webpack dev server version problem

5. Babel configuration. Babelrc file

. babelrc is the configuration file of Babel, which is placed in the root directory of the project. Generally, the. Babelrc file does not need to be modified. If you do all the above and still report an error, you can view the official website document to configure the file

 

In the code generated by the project using Vue cli, there is a. Babelrc file in the root directory. In the default generated template content, add “usebuiltins”: “entry”  , This is a setting that specifies which content needs to be Polyfill (compatible).
usebuiltins there are three settings

False – do nothing

Entry – according to the support of the browser version, the Polyfill requirements are split and imported, and only Polyfill that is not supported by the browser is imported

Usage – check the usage of ES6/7/8 in the code, and only load the Polyfill used in the code

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

See Babel’s official website for details: https://www.babeljs.cn/

Summary

1. Projects written in Vue can be compatible with IE9 and above at most

2. Use   babel-polyfill

3. Specify the UI framework, library and plug-in path of the third party to be transcoded in Babel loader

4. Configure. Babelrc file

5. Babel is a powerful thing   https://www.babeljs.cn/

Similar Posts: