解决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中进行运行展示了。