当前位置: 首页 > news >正文

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

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

相关文章:

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

解决vue2项目在IE11浏览器中无画面的兼容问题 背景介绍当前网上能找打的教程 背景介绍 当前项目面临其他浏览器都可以运行,但是在IE11浏览器中出现白屏的现象,F12后台也没有报错,项目月底也要交付了。当前项目的vue版本为2.6.11,…...

信号

信号也是IPC中的一种,是和管道,消息队列,共享内存并列的概念。 本文参考: Linux中的信号_linux中信号_wolf鬼刀的博客-CSDN博客 Linux系统编程(信号处理 sigacation函数和sigqueue函数 )_花落已飘的博客-CSDN博客 Linu…...

产品经理的真实薪资有多少?今天带你看看

作为产品经理,除了需要拥有扎实的技术背景和出色的产品设计能力,还需具备出色的领导力和商业敏感度。因此,产品经理的薪资也越来越成为人们关注的话题。那么,一般来说,产品经理的薪资水平如何呢? 薪资多少…...

《一个操作系统的实现》windows用vm安装CentOS——从bochs环境搭建到第一个demo跑通

vm安装CentOS虚拟机带有桌面的版本。su输入密码123456。更新yum -y update 。一般已经安装好后面这2个工具:yum install -y net-tools wget。看下ip地址ifconfig,然后本地终端连接ssh root192.168.249.132输入密码即可,主要是为了复制网址方便…...

线程Thread

文章目录 一、概念1、进程2、线程3、CPU与线程的关系4、并行、并发5、线程的生命周期 二、创建1、继承Thread2、实现Runnable接口3、实现Callable接口 三、API1、获取运行使用的线程2、唯一标识3、线程名4、优先级5、是否处于活动状态6、守护线程7、join1、API2、有无join对比 …...

如何使用CSS实现一个渐变背景效果?

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 使用CSS实现渐变背景效果⭐ 线性渐变(Linear Gradient)⭐ 径向渐变(Radial Gradient)⭐ 写在最后 ⭐ 专栏简介 前端入门之旅:探索Web开发的奇妙世界 记得点击上方或者右侧链接订…...

初始C语言(7)——详细讲解有关初阶指针的内容

系列文章目录 第一章 “C“浒传——初识C语言(1)(更适合初学者体质哦!) 第二章 初始C语言(2)——详细认识分支语句和循环语句以及他们的易错点 第三章 初阶C语言(3)——…...

ArcGIS Pro技术应用(暨基础入门、制图、空间分析、影像分析、三维建模、空间统计分析与建模、python融合、案例应用)

GIS是利用电子计算机及其外部设备,采集、存储、分析和描述整个或部分地球表面与空间信息系统。简单地讲,它是在一定的地域内,将地理空间信息和 一些与该地域地理信息相关的属性信息结合起来,达到对地理和属性信息的综合管理。GIS的…...

RISC-V公测平台发布 · 数据库在RISC-V服务器上的适配评估

前言 上一期讲到YCSB在RISC-V服务器上对MySQL进行性能测试(RISC-V公测平台发布 使用YCSB测试SG2042上的MySQL性能),在这一期文章中,我们继续深入讨论RISC-V数据库的应用。本期就继续利用HS-2平台来测试数据库软件在RISC-V服务器…...

UE5.2 LyraDemo源码阅读笔记(五)输入系统

Lyra里使用了增强输入系统,首先知道增强输入系统里的三个类型配置。 一、Input Actions (IA): 输入操作带来的变量,与玩家的输入组件绑定,回调里驱动玩家行为。 二、InputMappingContext(IMC)&#xff1a…...

线段树详解——影子宽度

OK,今天来讲一讲线段树~~ 线段树是什么线段树的实现线段树的时间复杂度线段树的应用线段树的节点结构其他操作和优化例题——影子宽度输入输出格式输入格式输出格式 输入输出样例输入样例输出样例 例题讲解 线段树是什么 线段树( S e g m e n t Segmen…...

使用R语言绘制折线图

写在前面 昨天我们分享了使用Python绘制折线图的教程,跟着NC学作图 | 使用python绘制折线图,考虑到很多同学基本不使用Python绘图。那么,我们也使用R语言复现此图形。 此外,在前期的教程中,我们基本没有分享过折线图的教程。因此,我们在这里也制作一期关于折线图的教程。…...

无涯教程-Perl - wantarray函数

描述 如果当前正在执行的函数的context正在寻找列表值,则此函数返回true。在标量context中返回false。 语法 以下是此函数的简单语法- wantarray返回值 如果没有context,则此函数返回undef;如果lvalue需要标量,则该函数返回0。 例 以下是显示其基本用法的示例…...

【gitkraken】gitkraken自动更新问题

GitKraken 会自动升级&#xff01;一旦自动升级&#xff0c;你的 GitKraken 自然就不再是最后一个免费版 6.5.1 了。 在安装 GitKraken 之后&#xff0c;在你的安装目录&#xff08;C:\Users\<用户名>\AppData\Local\gitkraken&#xff09;下会有一个名为 Update.exe 的…...

《Java Web程序设计》试卷03

《Java Web程序设计》试卷03 课程编码&#xff1a; 301209 适用专业&#xff1a; 计算机应用(包括JAVA方向) 注 意 事 项 1、首先按要求在试卷标封处填写你所在的系&#xff08;部&#xff09;、专业、班级及学号和姓名&#xff1b; 2、仔细阅读各类题目的回答要求&#xff0c;…...

怎么查看小程序中的会员信息

商家通过查看会员信息&#xff0c;可以更好地了解用户&#xff0c;并为他们提供更个性化的服务和推荐。接下来&#xff0c;就将介绍如何查看会员信息。 商家在管理员后台->会员管理处&#xff0c;可以查看到会员列表。支持搜索会员的卡号、手机号和等级。还支持批量删除会员…...

网络安全—黑客—自学笔记

想自学网络安全&#xff08;黑客技术&#xff09;首先你得了解什么是网络安全&#xff01;什么是黑客&#xff01; 网络安全可以基于攻击和防御视角来分类&#xff0c;我们经常听到的 “红队”、“渗透测试” 等就是研究攻击技术&#xff0c;而“蓝队”、“安全运营”、“安全…...

深度解读波卡 2.0:多核、更有韧性、以应用为中心

本文基于 Polkadot 生态研究院整理&#xff0c;有所删节 随着波卡 1.0 的正式实现&#xff0c;波卡于 6 月 28 日至 29 日在哥本哈根举办了年度最重要的会议 Polkadot Decoded 2023&#xff0c;吸引了来自全球的行业专家、开发者和爱好者&#xff0c;共同探讨和分享波卡生态的…...

微服务中间件--Eureka注册中心

Eureka注册中心 a.eureka原理分析b.搭建eureka服务c.服务注册d.服务发现 a.eureka原理分析 1.每个服务启动时&#xff0c;将自动在eureka中注册服务信息 (每个服务每隔30秒发送一次的心跳续约&#xff0c;当某个服务没有发送时&#xff0c;eurekaServer将自动剔除该服务&#x…...

积跬步至千里 || 矩阵可视化

矩阵可视化 矩阵可以很方面地展示事物两两之间的关系&#xff0c;这种关系可以通过矩阵可视化的方式进行简单监控。 定义一个通用类 from matplotlib import pyplot as plt import seaborn as sns import numpy as np import pandas as pdclass matrix_monitor():def __init…...

Vim 调用外部命令学习笔记

Vim 外部命令集成完全指南 文章目录 Vim 外部命令集成完全指南核心概念理解命令语法解析语法对比 常用外部命令详解文本排序与去重文本筛选与搜索高级 grep 搜索技巧文本替换与编辑字符处理高级文本处理编程语言处理其他实用命令 范围操作示例指定行范围处理复合命令示例 实用技…...

【Oracle APEX开发小技巧12】

有如下需求&#xff1a; 有一个问题反馈页面&#xff0c;要实现在apex页面展示能直观看到反馈时间超过7天未处理的数据&#xff0c;方便管理员及时处理反馈。 我的方法&#xff1a;直接将逻辑写在SQL中&#xff0c;这样可以直接在页面展示 完整代码&#xff1a; SELECTSF.FE…...

大语言模型如何处理长文本?常用文本分割技术详解

为什么需要文本分割? 引言:为什么需要文本分割?一、基础文本分割方法1. 按段落分割(Paragraph Splitting)2. 按句子分割(Sentence Splitting)二、高级文本分割策略3. 重叠分割(Sliding Window)4. 递归分割(Recursive Splitting)三、生产级工具推荐5. 使用LangChain的…...

视频字幕质量评估的大规模细粒度基准

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 摘要 视频字幕在文本到视频生成任务中起着至关重要的作用&#xff0c;因为它们的质量直接影响所生成视频的语义连贯性和视觉保真度。尽管大型视觉-语言模型&#xff08;VLMs&#xff09;在字幕生成方面…...

Springcloud:Eureka 高可用集群搭建实战(服务注册与发现的底层原理与避坑指南)

引言&#xff1a;为什么 Eureka 依然是存量系统的核心&#xff1f; 尽管 Nacos 等新注册中心崛起&#xff0c;但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制&#xff0c;是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...

初探Service服务发现机制

1.Service简介 Service是将运行在一组Pod上的应用程序发布为网络服务的抽象方法。 主要功能&#xff1a;服务发现和负载均衡。 Service类型的包括ClusterIP类型、NodePort类型、LoadBalancer类型、ExternalName类型 2.Endpoints简介 Endpoints是一种Kubernetes资源&#xf…...

LangChain知识库管理后端接口:数据库操作详解—— 构建本地知识库系统的基础《二》

这段 Python 代码是一个完整的 知识库数据库操作模块&#xff0c;用于对本地知识库系统中的知识库进行增删改查&#xff08;CRUD&#xff09;操作。它基于 SQLAlchemy ORM 框架 和一个自定义的装饰器 with_session 实现数据库会话管理。 &#x1f4d8; 一、整体功能概述 该模块…...

Windows安装Miniconda

一、下载 https://www.anaconda.com/download/success 二、安装 三、配置镜像源 Anaconda/Miniconda pip 配置清华镜像源_anaconda配置清华源-CSDN博客 四、常用操作命令 Anaconda/Miniconda 基本操作命令_miniconda创建环境命令-CSDN博客...

比较数据迁移后MySQL数据库和OceanBase数据仓库中的表

设计一个MySQL数据库和OceanBase数据仓库的表数据比较的详细程序流程,两张表是相同的结构,都有整型主键id字段,需要每次从数据库分批取得2000条数据,用于比较,比较操作的同时可以再取2000条数据,等上一次比较完成之后,开始比较,直到比较完所有的数据。比较操作需要比较…...

抽象类和接口(全)

一、抽象类 1.概念&#xff1a;如果⼀个类中没有包含⾜够的信息来描绘⼀个具体的对象&#xff0c;这样的类就是抽象类。 像是没有实际⼯作的⽅法,我们可以把它设计成⼀个抽象⽅法&#xff0c;包含抽象⽅法的类我们称为抽象类。 2.语法 在Java中&#xff0c;⼀个类如果被 abs…...