解决vue2项目在IE11浏览器中无画面的兼容问题
- 背景介绍
- 当前网上能找打的教程
背景介绍
当前项目面临其他浏览器都可以运行,但是在IE11浏览器中出现白屏的现象,F12后台也没有报错,项目月底也要交付了。当前项目的vue版本为2.6.11,cli的版本为3。。
自己捣鼓了两天没搞出来,后来又喊了一位大神才用了大半天的时间解决了此问题。
当前网上能找打的教程
基于vue2和cli3的基础上,一般从以下几个方向进行尝试:
-
使用Babel进行转译:使用Babel将Vue的代码转换为兼容旧版浏览器的语法和特性,确保代码可以正常运行。
-
引入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中进行运行展示了。