徐州建设局网站,建设项目环境影响评价公示网站,网页游戏源码交易平台,用php做的博客网站有哪些解决vue2项目在IE11浏览器中无画面的兼容问题 背景介绍当前网上能找打的教程 背景介绍
当前项目面临其他浏览器都可以运行#xff0c;但是在IE11浏览器中出现白屏的现象#xff0c;F12后台也没有报错#xff0c;项目月底也要交付了。当前项目的vue版本为2.6.11#xff0c;… 解决vue2项目在IE11浏览器中无画面的兼容问题 背景介绍当前网上能找打的教程 背景介绍
当前项目面临其他浏览器都可以运行但是在IE11浏览器中出现白屏的现象F12后台也没有报错项目月底也要交付了。当前项目的vue版本为2.6.11cli的版本为3。。
自己捣鼓了两天没搞出来后来又喊了一位大神才用了大半天的时间解决了此问题。
当前网上能找打的教程
基于vue2和cli3的基础上一般从以下几个方向进行尝试 使用Babel进行转译使用Babel将Vue的代码转换为兼容旧版浏览器的语法和特性确保代码可以正常运行。 引入polyfills引入polyfills来提供对一些新特性的支持。可以使用core-js和babel-polyfill等库来引入所需的polyfills。
常见的操作 以下比较好的文章的链接 1.vue兼容ie11babel/polyfill、core-js3两种方式 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/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIlXFhQG2bjy4Pu1IEAlCNUzRDYDdFwFYUKvXcIA,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中进行运行展示了。
