位置: IT常识 - 正文

vue项目系统兼容IE浏览器问题以及解决方案(vue怎么做兼容)

编辑:rootadmin
vue项目系统兼容IE浏览器问题以及解决方案 系统兼容IE浏览器问题以及解决方案问题

推荐整理分享vue项目系统兼容IE浏览器问题以及解决方案(vue怎么做兼容),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue项目中遇到的兼容问题,vue项目兼容ie11,vue3.0 兼容性,vue2兼容,vue项目中遇到的兼容问题,vue项目兼容性问题,vue 兼容,vue项目中遇到的兼容问题,内容如对您有帮助,希望把文章链接给更多的朋友!

vue项目在IE浏览器上运行时会出现兼容性问题:JavaScript语法报错,css样式错乱。原因是在IE(以IE11为例)浏览器下,部分js的写法需要改变,部分样式在IE浏览器上不支持,以及一些IE浏览器特有的问题。

vue 只兼容ie8以上版本;

IE 不兼容 axios的promiss对象;

IE 不兼容es6语法;

解决方案

下载对应插件包解决js兼容性问题:babel-polyfill,es6-promise以及 babel-plugin-transform-es2015-modules-commonjs

一、关于babel-polyfill

1、说明:This will emulate a full ES2015+ environment and is intended to be used in an application rather than a library/tool. This polyfill is automatically loaded when using babel-node.(模拟ES2015以上的环境,主要用于对ES6新语法不支持的浏览器);

2、安装:npm install --save babel-polyfill;

3、配置:module.exports = { entry: [“babel-polyfill”, “./src/main.js”] };

vue项目系统兼容IE浏览器问题以及解决方案(vue怎么做兼容)

4、main.js中配置:import ‘babel-polyfill’ //放在最顶部,确保全面加载

二、关于es6-promise

1、说明:若在项目中使用了ES6 promise对象,它在Chrome、Safari浏览器下可以正常运行,但在360兼容模式、IE内核中不支持;

2、安装:npm install es6-promise;

3、配置:在main.js中加入require(‘es6-promise’).polyfill(),用于在node或浏览器中支持ES6 与CommonJS。

因为项目中require和import混用的原因,在做了IE兼容之后打包会出现问题,会报以下错误:

Cannot assign to read only property 'exports' of object '#<Object>'

此时就需要安装babel-plugin-transform-es2015-modules-commonjs插件来解决报错

先安装:

npm install --save-dev babel-plugin-transform-es2015-modules-commonjs

然后再 .babelrc 中添加该插件

"plugins": ["transform-es2015-modules-commonjs"]

安装完以上插件之后,还需要做相关配置的修改,具体操作如下:

vue.config.js文件chainWebpack方法中添加

config.entry.app = ["babel-polyfill", "./src/main.js"];config.module.rule('compile') .test(/\.js$/) .include .add(resolve('src')) .add(resolve('test')) .add(resolve('node_modules/webpack-dev-server/client')) .add(resolve('node_modules')) .end() .use('babel') .loader('babel-loader') .options({ presets: [ ['@babel/preset-env', { modules: false }] ] });

babel.config.js中对应修改,添加sourceType和useBuiltIns:

module.exports = { presets: [ // '@vue/cli-plugin-babel/preset', //文件原始内容 ['@vue/app', { useBuiltIns: 'entry', //添加的内容 }] ], sourceType: 'unambiguous'}

main.js中代码顶部加入对应引用:

import 'babel-polyfill'import Es6Promise from 'es6-promise'require('es6-promise').polyfill()Es6Promise.polyfill()Plain Text

以上就是处理IE浏览器js兼容问题,至于css样式兼容,则需要对应修改对应文件样式,在IE浏览和chrome浏览器上分别测试,两边都适配才可以。

本文链接地址:https://www.jiuchutong.com/zhishi/287065.html 转载请保留说明!

上一篇:YOLOv5源码逐行超详细注释与解读(7)——网络结构(2)common.py(yolo 源码)

下一篇:富贵竹怎么养(富贵竹怎么养才能更旺盛水培生根)

  • 公司注册资金大小有何利弊

    公司注册资金大小有何利弊

  • QQ群如何拉人,加群方法,不被T出群的技巧(QQ群如何拉人进去)

    QQ群如何拉人,加群方法,不被T出群的技巧(QQ群如何拉人进去)

  • 微信群里踢人怎么踢人(微信群里踢人怎么踢不出去)

    微信群里踢人怎么踢人(微信群里踢人怎么踢不出去)

  • 艺术字怎么居中(艺术字怎么居中显示)

    艺术字怎么居中(艺术字怎么居中显示)

  • 苹果8信号不好怎么解决(苹果14手机信号不好怎么回事)

    苹果8信号不好怎么解决(苹果14手机信号不好怎么回事)

  • 华为国行与非国行区别(华为非国行和国行哪个好)

    华为国行与非国行区别(华为非国行和国行哪个好)

  • lio an00是什么型号(lio-an00是什么型号多少钱)

    lio an00是什么型号(lio-an00是什么型号多少钱)

  • 秘乐短视频是阿里巴巴旗下的吗(秘乐短视频事件)

    秘乐短视频是阿里巴巴旗下的吗(秘乐短视频事件)

  • 为什么苹果手机闹钟铃声和设置的不一样(为什么苹果手机连不上wifi)

    为什么苹果手机闹钟铃声和设置的不一样(为什么苹果手机连不上wifi)

  • 抖音认证是什么(抖音认证怎么认证?)

    抖音认证是什么(抖音认证怎么认证?)

  • 电话一直关机怎么回事(拨打号码一直关机)

    电话一直关机怎么回事(拨打号码一直关机)

  • cmpay门户是什么意思(CMPAY门户是什么手机)

    cmpay门户是什么意思(CMPAY门户是什么手机)

  • xsmax怎么用指纹解锁(苹果xs max怎么用指纹)

    xsmax怎么用指纹解锁(苹果xs max怎么用指纹)

  • 下划线长度怎么调整(下划线长度怎么调)

    下划线长度怎么调整(下划线长度怎么调)

  • 手机激活了能退吗(手机激活了退货退款商家拒绝了申请了平台介入有用吗)

    手机激活了能退吗(手机激活了退货退款商家拒绝了申请了平台介入有用吗)

  • vivos5怎么设置返回键(vivoy5s如何设置返回)

    vivos5怎么设置返回键(vivoy5s如何设置返回)

  • 键盘开关是哪一个键(键盘开关是哪一个键ON)

    键盘开关是哪一个键(键盘开关是哪一个键ON)

  • 抖音怎么重新绑身份证(抖音怎么重新绑定银行卡)

    抖音怎么重新绑身份证(抖音怎么重新绑定银行卡)

  • 华为云空间满了怎么清理(华为云空间满了怎么删除照片)

    华为云空间满了怎么清理(华为云空间满了怎么删除照片)

  • 抖音怎样只对某个人看(抖音怎样只对某人点赞)

    抖音怎样只对某个人看(抖音怎样只对某人点赞)

  • joycon电量怎么看(joycon电量在哪看)

    joycon电量怎么看(joycon电量在哪看)

  • 荣耀20耳机插孔在哪里(荣耀20的耳机孔)

    荣耀20耳机插孔在哪里(荣耀20的耳机孔)

  • 小米熄屏怎么显示时间(小米手机灭屏后怎么显示时间)

    小米熄屏怎么显示时间(小米手机灭屏后怎么显示时间)

  • 苹果xs max分期付款首付多少(苹果xs max分期付款需要什么)

    苹果xs max分期付款首付多少(苹果xs max分期付款需要什么)

  • 爱奇艺账号能同时几个人使用(爱奇艺同一个账号可以在两个手机登陆吗)

    爱奇艺账号能同时几个人使用(爱奇艺同一个账号可以在两个手机登陆吗)

  • mac如何修改hosts(mac如何修改图片像素大小)

    mac如何修改hosts(mac如何修改图片像素大小)

  • 合伙企业税务筹划点
  • 固定资产的进项税额可以抵扣吗
  • 红冲以前年度收入成本的账务处理
  • 汇算清缴银行手续费
  • 教育培训行业税负率是多少
  • 应付职工薪酬为什么不属于金融负债
  • 融资租入固定资产的入账价值
  • 小企业会计利润报表
  • 商品流通企业商品流转的核算方法有
  • 增值税专用发票电子版
  • 建筑行业异地预缴增值税
  • 完全发生在境外的服务增值税
  • 企业购买汽车时需要交哪些税?
  • 工程安装公司是干嘛的
  • 企业接受大额捐赠,可以分次确认收入缴纳企业所得税吗?
  • 不得核定征收企业所得税的行业
  • 民间非营利组织有哪些
  • 税务局查到发票有问题
  • 资产处置收益的含义
  • 汇算清缴发票可以做费用票吗
  • 商标公司转让给个人提供什么?
  • 采用赊销方式销售货物的纳税义务发生时间
  • 刚装好的服务器怎么安装
  • 从税法角度看,商誉计税基础
  • linux-4.4
  • 个人所得税手续费比例
  • 鸿蒙系统小艺怎么改声音
  • 银行贷款发放怎么做凭证
  • 公司融资a轮说明什么
  • PHP:stream_filter_remove()的用法_Stream函数
  • 公司为员工缴纳社保的基数怎么确定
  • 夜晚的地球 (© NASA)
  • 企业所得税弥补以前年度亏损怎么算
  • 记载资金的账簿印花税的税率是多少
  • php怎么创建项目
  • php有面向对象吗
  • php确认弹窗
  • Spring Security(七)-- AuthenticationProvider
  • uni-app原理
  • 搭建本地http服务器
  • 前端程序员和后端程序员哪个工资高
  • php内存缓存
  • 数据库arc文件
  • wordpress安装包
  • 宝塔面板入口
  • 收到的存款利息
  • 农产品普通发票进项税抵扣
  • 用友u8固定资产减少怎么撤销
  • access不能打开数据库
  • 一般纳税人进项销项抵扣如何做账
  • 收到采购发票如何录入系统
  • 金融企业有啥
  • 什么是调表不调账
  • 党组织专项经费包括什么
  • 国家规定房屋买卖中介费
  • 辞退补偿金入什么科目
  • 营改增后计税依据
  • 债权人接受债务人土地抵押,还会被其他债权人查封?
  • win7如何给电脑硬盘加密
  • winxp如何禁用u盘
  • iis安装文件xp版
  • win8.1如何更改密码
  • 电脑自带的groove音乐用不了
  • 在linux中使用apache发布web服务时默认web站点
  • codeblocks视频教程
  • js响应式布局
  • win7支持快速启动吗
  • 月经其间可以吃消摇丸吗
  • android 像素
  • linux中shell脚本实验总结
  • JavaScript中Math.SQRT2属性的使用详解
  • 深入理解计算机系统
  • XRegExp 0.2: Now With Named Capture
  • 重庆电子税务局怎么开电子发票
  • 税控发票开票软件密码怎么修改?
  • 国税局下设几个部门
  • 药店迁址流程2019
  • 江苏国税电子税务局网登录
  • 价税分离有什么好处
  • 电子税务局财务制度备案在哪
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设