❝

I joined the material team at the beginning of this year, and the first problem I encountered was to solve the compatibility problem of IE.

❞

1 phenomenon

When I log in to the system using Internet Explorer, the login page cannot be loaded and the page is blank. Therefore, I cannot access other pages in the system.

2 An error message is displayed

Input system url in IE browser, open console, find this error: SCRIPT1003: missing ‘:’

My first thought was that I needed to do some compatibility configuration for WebPack, so I put my head down and went through a general configuration.

3 Perform general compatibility configuration

Because the scaffolding used in the front-end frame of this system is 3.x version, it has to be configured for CLI3.

3.1 Check the vue.config.js file

3.2 introduced polyfill

CNPM install Babel - polyfill - DCNPM install es6 - promise - DCopy the code

3.3 configured presets

Open the babel.config.js file and set the presets as follows:

module.exports = {
// Vuecli3 does not need to be configured with transform-vue-jsxpresets: [
  [
    '@vue/app'. {  useBuiltIns: 'entry'. polyfills: ['es6.promise'.'es6.symbol']  }  ] ].plugins: ['lodash'.'jsx-v-model'] } Copy the code

3.4 Configuration of import files

Open the main.js file and introduce polyfill from 3.1 installation:

import '@babel/polyfill'
import Es6Promise from 'es6-promise'
Es6Promise.polyfill()
Copy the code

4 Check third-party libraries

If you still get an error after common configuration, you can determine that the rest of the problem is due to third-party plug-ins, and you need to look in the package.json file to see which third-party libraries have been introduced.

Add the transpileDependencies library that may have compatibility problems to the collection in vue.config.js. Add the following two libraries to the collection:

vueConfigs = {
  transpileDependencies: [
    'vue-echarts'.    'resize-detector'.    'v-contextmenu'. 'vue-runtime-helpers'  ]  Copy the code

5 test

After the configuration, restart the project for verification. At this time, you can log in to the system and enter the home page successfully.

At this point, the problem is solved and the login page can be successfully loaded and logged into the system.

Get it out of the way.

About the author: JeremyCC

This article is formatted using MDNICE