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

1 phenomenon

What happened was that when Internet Explorer logged in to the system, the login page didn’t load, the page was blank, so you couldn’t access any other pages in the system.

2 check and report an error

Enter the system address in IE browser, open the console, and find this error: Script1003: missing ‘:’The first thought was that we needed to do some compatibility configuration for Webpack, so I put my head down and did some general configuration.

3. Configuration for general compatibility

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

3.1 Check the vue.config.js file

3.2 introduced polyfill

CNPM install es6 - promise - D

3.3 configured presets

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

// VueCli3 does not need to configure transform-vue-JSX presets: [['@vue/app', {useBuiltIns: 'entry', polyfills: ['es6.promise', 'es6.symbol'] } ] ], plugins: ['lodash', 'jsx-v-model'] }

3.4 Configuration of entry files

Open the main.js file and import the polyfill installed in 3.1:

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

4. Checking third party libraries

After the generic configuration is done and an error is still reported, you can determine that the rest of the cause is due to a third-party plug-in, and you need to look in the package.json file to see which third-party libraries were introduced.

Add libraries that may have compatibility problems to the transpileDependencies set in the vue.config.js file. After checking, add the following two libraries to the set:

  transpileDependencies: [
    'vue-echarts',
    'resize-detector',
    'v-contextmenu',
    'vue-runtime-helpers'
  ]

5 test

After the configuration is complete, restart the project for verification and find that you can successfully log in to the system and enter the home page.

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

All right, he was right, he was right.

About the author: JeremyCC

A love singing front end engineering lion, like I can point attention oh! (avatar for reference only, lol)