兼容IE浏览器

解决兼容ie,需要用到babel,用babel来进行es6的转换,以及一些api的模拟. 配置babel有两种方式:

(一)babel.config.js方式

main.js

import "url-search-params-polyfill";

 让ie支持URLSearchParams,在报错后可以跳转到对应报错的依赖包内,而不是看着打包后的报错代码,找不到到底是哪个包报错了.方便排查是哪个依赖包报错了,再对包进行替换或者转译

vue.config

关键代码

 transpileDependencies: ['bpmn-js-token-simulation', 'element-ui', 'highlight.js'],
chainWebpack(config) {
    config.entry('main').add('babel-polyfill')
   //指定入口点,添加 babel-polyfill: .add('babel-polyfill') 表示在该入口点中包含 babel-polyfill。babel-polyfill 是一个用于模拟完整的 ES2015+ 环境的包，这意味着它会添加那些在较旧的 JavaScript 引擎中缺失的功能，如 Promises、Symbols、Array.from 等等。
    config.module
      .rule('compile')
      .test(/\.js$/)
      .include
      .add(resolve('src'))
      .add(resolve('node_modules'))
      .end()
      .use('babel')
      .loader('babel-loader')
      .end()}

transpileDependencies:中配置的是,有些依赖包内使用了es6的语法,会导致ie不兼容,于是再Ie中会报错,我们排查到具体是哪个依赖包后可以将其加入这个配置,就可以解决这个依赖包的问题.

babel.config.js

module.exports = {
  presets: [
    ['@vue/app', { useBuiltIns: 'entry' }]
    
  ]
}

{ useBuiltIns: 'entry' } 是在 Babel 配置中使用的一种配置选项。Babel 是一个广泛使用的 JavaScript 编译器，它允许开发者将使用最新JavaScript特性编写的代码转换成向后兼容的版本，以便在当前和旧版浏览器中运行。

.babelrc版本

.babelrc

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage",
        "corejs": 3,
        "targets": {
          "ie": "11"  
        }
      }
    ],
    "@vue/cli-plugin-babel/preset"
  ],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
    // 在这里可以添加其他插件
  ]
}

main.js

import "url-search-params-polyfill"; //让ie支持URLSearchParams
import "core-js/stable";
import "regenerator-runtime/runtime"; //模拟es6

vue.config.js

  transpileDependencies: ['axios'],//哪些依赖包报错了,先尝试加入这里,后续还是不行,尝试降低版本.
  chainWebpack(config) {
    config.entry('main').add('babel-polyfill')
  },

注意:很多时候不一定是es6的问题导致的ie不兼容,比如axios这个包,他的版本建议使用低版本,当你已经把它加入了transpileDependencies,但是还是报错,就可以找一下替换包或者把这个包降低版本了!!!!!!  兼容ie就是不断解决报错的一个过程