位置: 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 源码)

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

  • iqoo8怎么设置Super Audio(iqoo8怎么设置锁屏壁纸)

    iqoo8怎么设置Super Audio(iqoo8怎么设置锁屏壁纸)

  • 360浏览器怎么切换极速模式和兼容模式(360浏览器怎么切换模式)

    360浏览器怎么切换极速模式和兼容模式(360浏览器怎么切换模式)

  • iphone12动态壁纸怎么弄呢(iphone12动态壁纸按压不动)

    iphone12动态壁纸怎么弄呢(iphone12动态壁纸按压不动)

  • s10呼吸灯怎么调整(s105g呼吸灯)

    s10呼吸灯怎么调整(s105g呼吸灯)

  • 全功能typec和普通typec区别(全功能typec和普通typec区别图片)

    全功能typec和普通typec区别(全功能typec和普通typec区别图片)

  • 苹果手机上方时间蓝色(苹果手机上方时间电量图标怎么变小)

    苹果手机上方时间蓝色(苹果手机上方时间电量图标怎么变小)

  • 华为手机打不了字怎么办(华为手机打不了电话可以上网)

    华为手机打不了字怎么办(华为手机打不了电话可以上网)

  • 三菱重工海尔jx和tx的区别(三菱重工海尔JX-H系列介绍)

    三菱重工海尔jx和tx的区别(三菱重工海尔JX-H系列介绍)

  • rtx2060super配什么cpu

    rtx2060super配什么cpu

  • 苹果双网通版什么意思(双网通的苹果)

    苹果双网通版什么意思(双网通的苹果)

  • 华为手机看视频自动息屏怎么办(华为手机看视频自动锁屏怎么办)

    华为手机看视频自动息屏怎么办(华为手机看视频自动锁屏怎么办)

  • 3mp和5mp哪个更清楚(3mp和5mp哪个更清晰)

    3mp和5mp哪个更清楚(3mp和5mp哪个更清晰)

  • vivo x27pro什么时候开售(vivox27pro什么时候生产的)

    vivo x27pro什么时候开售(vivox27pro什么时候生产的)

  • 安卓怎么传照片给苹果(安卓怎么传照片到另一个手机上)

    安卓怎么传照片给苹果(安卓怎么传照片到另一个手机上)

  • 抖音可以看到谁转发吗(抖音可以看到谁点赞了我的作品)

    抖音可以看到谁转发吗(抖音可以看到谁点赞了我的作品)

  • 魅族16屏幕刷新率(魅族16s屏幕刷新)

    魅族16屏幕刷新率(魅族16s屏幕刷新)

  • rtk单点解决办法(rtk一直单点)

    rtk单点解决办法(rtk一直单点)

  • 美图秀秀怎么剪辑视频(美图秀秀怎么剪切图片)

    美图秀秀怎么剪辑视频(美图秀秀怎么剪切图片)

  • 小米9se红外遥控怎么用(小米9se红外遥控怎么设置)

    小米9se红外遥控怎么用(小米9se红外遥控怎么设置)

  • 拍照怎么显示时间(拍照怎么显示时间和日期苹果手机)

    拍照怎么显示时间(拍照怎么显示时间和日期苹果手机)

  • the Pura Meduwe Karang神庙中雕刻艺术家W.O.J.Nieuwenkamp的作品,印度尼西亚巴厘岛 (© John Elk III/Getty Images)

    the Pura Meduwe Karang神庙中雕刻艺术家W.O.J.Nieuwenkamp的作品,印度尼西亚巴厘岛 (© John Elk III/Getty Images)

  • Windows7纯净版系统IE浏览器中毒的解决方法(win7纯净版系统之家)

    Windows7纯净版系统IE浏览器中毒的解决方法(win7纯净版系统之家)

  • vite基础使用及相关配置(vit详解)

    vite基础使用及相关配置(vit详解)

  • 布罗兹湿地国家公园,英国诺福克郡 (© Steven Docwra/Getty Images)(布兹洛夫)

    布罗兹湿地国家公园,英国诺福克郡 (© Steven Docwra/Getty Images)(布兹洛夫)

  • 税局退个税手续费税率
  • 小规模附加税如何做帐
  • 装修费用应该计入什么科目
  • 企业所得税季报时间
  • 资产负债表中未交税金负数表示什么
  • 个人出租商业用房
  • 固定资产减值必有损益吗
  • 土地股权转让交多少税
  • 企业呆账的处理方式
  • 集资建房出租收入如何缴纳个税
  • 小微企业增值税免税政策2023年
  • 产品在海关发生质量问题
  • 一般纳税人采购收到普通发票
  • 不征税收入税屋
  • 免税销售额怎么算出来的
  • 年终奖个税公式表最新
  • 房地产土地成本计算公式
  • 发生广告费用会计分录
  • 公司作账都按不含税价吗
  • 存货账实不符的税务风险
  • 个税申报系统的备份保留几份数据
  • 五联折叠票和两联折叠票的区别
  • 业绩补偿协议
  • 短期借款有没有上年结转
  • 知识产权代理公司前景如何
  • 企业扶贫有什么优惠政策
  • 发放股票股利会增加流通在外股票的数量
  • 模具维修费做什么费用
  • 会计凭证传递的原则及基本程序
  • 如何解决WIN10系统文件夹只读属性不能更改
  • php bcmul
  • 对于在某一时点履行义务,企业应当在
  • elementui中的el-tab-pane为什么内容会为0
  • 马德拉群岛旅游攻略
  • 增值税及附加税是什么意思
  • 座头鲸救人
  • thinkphp pathinfo
  • vue页面嵌套iframe vue页面
  • 数据挖掘 实战
  • python单链表的创建
  • 工业企业成本核算的一般程序
  • 免税农产品的范围有哪些
  • 进口货物的账务处理办法
  • 支付长期借款利息时,应借记什么账户
  • 物流公司进项包括什么
  • 小规模纳税人1%税率优惠政策
  • 加计抵减与加计抵消区别
  • 关于发放节日补助的通知
  • 报废半成品怎么做账
  • 资产减值哪些资产
  • 电子商务会计怎么样
  • 合伙企业与公司相比,有什么优势呢?
  • 金税盘税费减免分录
  • 错开发票所需要提供的资料以及时效要求是?
  • 本月应负担的修理费
  • 发票可以冲销几次
  • sql的排序函数
  • sql服务在哪
  • u极速u盘装系统
  • mac怎么设置应用权限
  • win7怎么更改电脑名字
  • 怎么在win7开始菜单添加文件夹
  • win10 20h2 04累积更新
  • win10一年更新几次
  • 手机ssh远程连接服务器
  • win7旗舰版没有睡眠设置
  • 初始化opengl时出错
  • pythonmatch函数
  • cocos2dx onpause崩
  • node.js介绍
  • mysql定时脚本
  • 如何大小写字母转换
  • jQueryUI Datepicker组件设置日期高亮
  • androidstudio手机编程软件
  • 深入理解新发展理念
  • android使用方法
  • javascript常用的数据类型有哪些
  • 吉林省电子税务局操作手册
  • 江苏医保给家人用怎么操作
  • 铁路土地使用税减免
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设