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

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

  • 淘宝短视频入口在哪里呢(淘宝短视频怎么操作)

    淘宝短视频入口在哪里呢(淘宝短视频怎么操作)

  • xsmax换屏幕影响面容吗(xsmax换屏幕影响原彩吗)

    xsmax换屏幕影响面容吗(xsmax换屏幕影响原彩吗)

  • filestorage文件夹可以删除吗(FileStorage文件夹复制到另一台手机上)

    filestorage文件夹可以删除吗(FileStorage文件夹复制到另一台手机上)

  • 华为旗下的手机品牌(华为旗下的手机哪哪款手机好)

    华为旗下的手机品牌(华为旗下的手机哪哪款手机好)

  • 充电宝轻微鼓包(充电宝轻微鼓包怎么处理)

    充电宝轻微鼓包(充电宝轻微鼓包怎么处理)

  • 短信拉黑了还能收到吗(短信拉黑了还能发出去吗)

    短信拉黑了还能收到吗(短信拉黑了还能发出去吗)

  • 电池伏和安什么意思(电池伏数大好还是安数大好)

    电池伏和安什么意思(电池伏数大好还是安数大好)

  • 华为nova7和nova7 se的区别(华为nova7和nova7 se的钢化膜一样吗)

    华为nova7和nova7 se的区别(华为nova7和nova7 se的钢化膜一样吗)

  • oppor11s运行内存越来越少怎么办 (oppor11s运行内存多少)

    oppor11s运行内存越来越少怎么办 (oppor11s运行内存多少)

  • qq背景变黑色,怎么调过来(qq背景变成黑色了怎么调回白色呢)

    qq背景变黑色,怎么调过来(qq背景变成黑色了怎么调回白色呢)

  • 微信不是群主怎么踢人出群(微信不是群主怎么艾特所有人)

    微信不是群主怎么踢人出群(微信不是群主怎么艾特所有人)

  • 启用ssid广播什么意思(启用ssid广播是什么意思)

    启用ssid广播什么意思(启用ssid广播是什么意思)

  • wps删除表格多余的线(删除wps多余的表格)

    wps删除表格多余的线(删除wps多余的表格)

  • 手机上如何购买火车票(手机上如何购买福彩3d)

    手机上如何购买火车票(手机上如何购买福彩3d)

  • 苹果x怎么设置拍照静音(苹果x怎么设置指纹密码锁屏)

    苹果x怎么设置拍照静音(苹果x怎么设置指纹密码锁屏)

  • 优酷3倍播放怎么弄(优酷长摁三倍播放)

    优酷3倍播放怎么弄(优酷长摁三倍播放)

  • iphone11pro用的什么基带(iphone11pro用的什么处理器)

    iphone11pro用的什么基带(iphone11pro用的什么处理器)

  • 荣耀7x双卡怎么安装(华为荣耀7x双卡双待怎么设置)

    荣耀7x双卡怎么安装(华为荣耀7x双卡双待怎么设置)

  • 小米智能锁的sn码在哪里(小米智能锁的生产厂家)

    小米智能锁的sn码在哪里(小米智能锁的生产厂家)

  • 趣智校园怎么退款(趣智校园怎么退款时忘记的登录密码)

    趣智校园怎么退款(趣智校园怎么退款时忘记的登录密码)

  • 不开钉钉手机会被定位吗(钉钉不插手机卡可以用吗?)

    不开钉钉手机会被定位吗(钉钉不插手机卡可以用吗?)

  • b站连续包月多久能取消(b站连续包月多少钱一个)

    b站连续包月多久能取消(b站连续包月多少钱一个)

  • vivox9备份在哪(vivox9备份在哪里找到)

    vivox9备份在哪(vivox9备份在哪里找到)

  • 华为安全中心在哪里(华为安全中心官网)

    华为安全中心在哪里(华为安全中心官网)

  • 华为mate20防水嘛(mate 20防水吗)

    华为mate20防水嘛(mate 20防水吗)

  • 无形资产摊销完后有余额吗
  • 生产车间领用材料,用于产品生产
  • 增值税发票丢失可以用复印件入账么
  • 股票交易费用计入
  • 开业前的其他费用
  • 新征用的耕地是什么意思
  • 偿债基金公司债
  • 进货方的现金折扣怎么处理?
  • 出口预收货款发生的时间和报表上的时间不一样怎么办
  • 职工福利费在期间费用表中怎么填
  • 建筑工程预收款预缴增值税的时间
  • 基金公司收到投资者的投资款
  • 税务总局关于四流一致解答
  • 公司清算实收资本是零吗
  • Windows server 2008设置远程桌面连接的详细步骤(图文教程)
  • 苹果系统中英文切换快捷键
  • c盘空间变小的原因
  • 公司车辆违章怎么办
  • 预缴增值税附加税款怎么填写申报表
  • 固定资产折旧的影响因素
  • linux zen3
  • 如何养成良好的安全行为
  • 京东预付卡怎么做账
  • 如何阻止win10升级到win11
  • appdata文件夹在用户文件夹哪里
  • 误删开始菜单
  • vue+element-ui项目
  • 出租设备收取租金合法吗
  • 笔记本通用音频驱动程序怎么修复
  • thinkphp vue
  • php怎么爬数据
  • php时间计算
  • 个体工商户年报逾期怎么办
  • vue 提示
  • mtd命令
  • 利润分配的顺序依次是什么
  • 应付职工薪酬怎么冲平
  • 印花税申报成功后在哪缴税
  • 营业外支出贷方在利润表怎么体现
  • 只有进项发票,没有销项可以吗
  • 个税申请退税流程
  • mongodb安装过程
  • 支付宝商户服务电话
  • 股权投资都有哪些
  • 出口货物申报表如何填写
  • 如何恢复sql数据库
  • 劳务外经证预缴税款
  • 公司收到银行发放贷款会计分录
  • 弥补亏损怎么做分录
  • 工程施工科目下可以设置咨询费吗
  • 计提固定资产折旧怎么做会计科目
  • 股权稀释违法吗
  • 电子记录表怎么填写
  • 暂估应付账款余额调整
  • 长期待摊费用是当月摊销还是次月摊销
  • 稳岗补贴会计分录怎么做,需要缴纳企业所得税不
  • mysql57安装过程怎样选安装目录
  • mysql安装使用教程
  • windows已保护你的电脑,阻止你的应用
  • mac系统的控制面板在哪
  • 证书登录什么意思
  • 电脑如何安装Anaconda
  • xp系统没有鼠标自己乱跳
  • centos5安装步骤
  • win7系统插u盘没反应怎么办
  • win7系统玩英雄联盟蓝屏
  • cocos2d怎么用
  • windows批处理命令大全
  • bat脚本怎么运行
  • 用bat打开cmd执行命令
  • unity屏幕坐标 ui坐标
  • jquery trigger实现联动的方法
  • js获取父窗口
  • jqueryw3c
  • jquery全局方法
  • 黑龙江国税局官网
  • 北京税务局发票查询
  • 江苏电子税务局社保缴费查询网站
  • 甘肃税务政策
  • 金税盘和uk
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设