解决vue2项目在IE11浏览器中无画面的兼容问题

背景介绍

当前项目面临其他浏览器都可以运行，但是在IE11浏览器中出现白屏的现象，F12后台也没有报错，项目月底也要交付了。当前项目的vue版本为2.6.11，cli的版本为3。。

自己捣鼓了两天没搞出来，后来又喊了一位大神才用了大半天的时间解决了此问题。

当前网上能找打的教程

基于vue2和cli3的基础上，一般从以下几个方向进行尝试：

1. 使用Babel进行转译：使用Babel将Vue的代码转换为兼容旧版浏览器的语法和特性，确保代码可以正常运行。

2. 引入polyfills：引入polyfills来提供对一些新特性的支持。可以使用core-js和babel-polyfill等库来引入所需的polyfills。

常见的操作：
以下比较好的文章的链接：
1.vue兼容ie11（@babel/polyfill、core-js@3两种方式）
2.解决vuecli-vue2项目ie浏览器白屏

在main.js 文件中导入以下包的某一两个

 import 'babel-polyfill';
// import '@vue/cli-plugin-babel/preset';
 import Es6Promise from 'es6-promise';
// Es6Promise.polyfill()

//import "core-js/stable"
//import 'regenerator-runtime/runtime'

在babel.config.js中添加如下：（动态选择）
 // presets: [['@vue/app', {useBuiltIns: 'entry',}]],// 此为vue/cli3
  // presets: [['@vue/cli-plugin-babel/preset', {useBuiltIns: 'entry',}]],// 此为vue/cli4
  // presets: ["@babel/preset-env"],
  presets: [
    '@vue/cli-plugin-babel/preset',
    ['@babel/preset-env', {
      useBuiltIns: 'entry',
      corejs: 3,
    }]
  ],
在vue.config.js中添加如下：（动态选择）
// transpileDependencies: ['resize-detector','vue-kityminder-calm'],
  // transpileDependencies: ['sockjs-client', 'crypto-js'], // 必须（缺一不可），还可以加上element-ui等
  transpileDependencies:[
    'sockjs-client',
    'js-sha256',
    'qrcodejs2',
    'element-ui/src',
    'element-ui/lib',
    'crypto-js',
    'enc-base64url.js',
    "vue-particles"
  ],
  // transpileDependencies: ["socket.io-client","vue-particles"],
  // configureWebpack: config => { config.entry.app = ['babel-polyfill', './src/main.js'];},

通过在我们的项目中使用上述可以找打的教程，发现还是无法解决当前的问题。

于是，另一位经验丰富的前端前辈来了：
做了以下配置：首先把cli3升级到了cli5,cli5的IE兼容有官方文档可查询

其次，
1.在main.js 文件中配置了

import 'core-js';

2.在bable.config.js中做了以下配置

module.exports = {
  compact: false,
  presets: [
    '@vue/cli-plugin-babel/preset',
    [
      '@babel/preset-env',
      {
        targets: {
          edge: '17',
          firefox: '60',
          chrome: '67',
          safari: '11.1',
          ie: '11'
        },
        useBuiltIns: 'entry',
        corejs: {
          version: '3.32.1',
          proposals: true
        }
      }
    ]
  ]
};

3.在jsconfig.json中做了以下配置，

{
    "compilerOptions": {
      "target": "ES5",
      "module": "commonjs",
      "allowSyntheticDefaultImports": true,
      "baseUrl": "./",
      "paths": {
        "@/*": [
          "src/*"
        ]
      }
    },
}

4.在package-lock.json中做了如下修改

 "dependencies": {
    "@aashutoshrathi/word-wrap": {
      "version": "1.2.6",
      "resolved": "https://registry.npmmirror.com/@aashutoshrathi/word-wrap/-/word-wrap-1.2.6.tgz",
      "integrity": "sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==",
      "dev": true
    },
    "@achrinza/node-ipc": {
      "version": "9.2.7",
      "resolved": "https://registry.npmmirror.com/@achrinza/node-ipc/-/node-ipc-9.2.7.tgz",
      "integrity": "sha512-/EvNkqB4HNxPWCZASmgrjqG8gIdPOolD67LGASvGMp/FY5ne0rbvpYg5o9x8RmgjAl8KdmNQ4YlV1et9DYiW8g==",
      "dev": true,
      "requires": {
        "@node-ipc/js-queue": "2.0.3",
        "event-pubsub": "4.3.0",
        "js-message": "1.0.7"
      }
    },

5.在package.json中做了如下修改

"dependencies": {
    "axios": "^0.19.0",
    "babel-eslint": "^8.0.1",
    "babel-plugin-component": "^1.1.1",
    "clipboard": "^2.0.11",
    "core-js": "^3.32.1",//新增的配置
    "dayjs": "^1.11.4",
    "echarts": "^5.3.1",
    "element-theme": "^2.0.1",
    "element-ui": "^2.13.2",
    "gulp-autoprefixer": "^6.1.0",
    "gulp-clean-css": "^4.2.0",
    "gulp-load-plugins": "^2.0.0",
    "gulp-rename": "^1.4.0",
    "gulp-sass": "^4.0.2",
    "js-cookie": "^2.2.0",
    "lodash": "^4.17.15",
    "node-sass": "^4.14.1",
    "qs": "^6.7.0",
    "quill": "^1.3.6",

6.在vue.config.js文件中做了以下配置修改

const { defineConfig } = require ('@vue/cli-service');
module.exports = defineConfig ({
  publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
  chainWebpack: config => {
    const svgRule = config.module.rule ('svg');
    svgRule.uses.clear ();
    svgRule
      .test (/\.svg$/)
      .use ('vue-svg-loader')
      .loader ('vue-svg-loader');
  },
  // 默认打开eslint效验，如果需要关闭，设置成false即可
  lintOnSave: false,
  productionSourceMap: false,
  devServer: {
    open: true,
    port: 8001,
    // proxy: {//原来的代理配置
    //   '47.888.888.888:8088': {
    //     target: 'http://47.888.888.888:8088',
    //     secure: false,
    //     ws: true,
    //     changeOrigin: true
    //   }
    // },
    proxy: 'http://47.888.888.888:8088',//下面这几行做的是新的配置
    headers: {
      'Access-Control-Allow-Headers': 'accept, content-type, accept-language',
      'Access-Control-Allow-Origin': '*'
    },
    client: {
      overlay: false
    }
  },
  transpileDependencies: true
});

以上配置完成之后，便可以在IE11中进行运行展示了。