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

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

  • do while循环语句例子(do while循环语句格式)

    do while循环语句例子(do while循环语句格式)

  • 华为nova9支持无线充电吗(华为nova9支持无线车载互联吗)

    华为nova9支持无线充电吗(华为nova9支持无线车载互联吗)

  • ppt裁剪图片在哪里(ppt裁剪图片在哪找)

    ppt裁剪图片在哪里(ppt裁剪图片在哪找)

  • 饿了么起送价怎么改(饿了么起送价怎么那么高)

    饿了么起送价怎么改(饿了么起送价怎么那么高)

  • vivoy93屏幕多大尺寸(vivoy93屏幕尺寸)

    vivoy93屏幕多大尺寸(vivoy93屏幕尺寸)

  • qq可以买赞吗(qq可以买点赞吗)

    qq可以买赞吗(qq可以买点赞吗)

  • 怎样登录qq不用验证码(怎样登录qq不用扫码就能登录)

    怎样登录qq不用验证码(怎样登录qq不用扫码就能登录)

  • 苹果11外屏碎了怎么换(苹果11外屏碎了一点不影响使用)

    苹果11外屏碎了怎么换(苹果11外屏碎了一点不影响使用)

  • 淘宝618什么时间开始(淘宝618什么时间段最便宜)

    淘宝618什么时间开始(淘宝618什么时间段最便宜)

  • b站动态审核要多久(b站动态审核中仅自己可见是原因)

    b站动态审核要多久(b站动态审核中仅自己可见是原因)

  • 抖音点赞撤销有记录吗(抖音点赞撤销对方能看到吗)

    抖音点赞撤销有记录吗(抖音点赞撤销对方能看到吗)

  • 淘宝退款红包的钱退到哪里了(淘宝退款红包的钱是平台出的吗)

    淘宝退款红包的钱退到哪里了(淘宝退款红包的钱是平台出的吗)

  • 删除了的微信好友怎么找回(删除了的微信好友朋友圈点赞还在吗)

    删除了的微信好友怎么找回(删除了的微信好友朋友圈点赞还在吗)

  • 华为p40 p40pro区别(华为p40 p40 pro)

    华为p40 p40pro区别(华为p40 p40 pro)

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

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

  • 什么软件可以设置锁屏动态壁纸(什么软件可以设置主题)

    什么软件可以设置锁屏动态壁纸(什么软件可以设置主题)

  • 红米note8pro支持扩展卡吗(红米note8pro支持快充吗)

    红米note8pro支持扩展卡吗(红米note8pro支持快充吗)

  • 微信封号怎么解除(微信封号怎么解开啊)

    微信封号怎么解除(微信封号怎么解开啊)

  • 拼多多怎么查看余额(拼多多怎么查看自己买过的东西)

    拼多多怎么查看余额(拼多多怎么查看自己买过的东西)

  • p30pro特色功能(p30pro有啥特殊功能)

    p30pro特色功能(p30pro有啥特殊功能)

  • 华为freebud使用技巧(华为freebuds操作说明)

    华为freebud使用技巧(华为freebuds操作说明)

  • 手机中怎么更改锁屏密码(手机中怎么更改字体样式)

    手机中怎么更改锁屏密码(手机中怎么更改字体样式)

  • 铃声多多的视频怎么保存到手机(铃声多多的视频铃声怎么取消)

    铃声多多的视频怎么保存到手机(铃声多多的视频铃声怎么取消)

  • 加利西亚省科斯塔达莫尔特的灯塔,西班牙 (© Carlos Fernandez/Getty Images)(加里西亚省)

    加利西亚省科斯塔达莫尔特的灯塔,西班牙 (© Carlos Fernandez/Getty Images)(加里西亚省)

  • 个人所得税申报操作流程2023
  • 小规模纳税人广告费扣除标准
  • 增值税不交什么后果
  • 住宿费可以抵扣进项吗
  • 工会经费与残保金的取数是一致吗
  • 收到租赁费发票的账务处理
  • 云信付款如何贴现
  • 签章是签字还是盖章z还是手印
  • 石油天然气管道保护法
  • 银行定期存款取钱需要本人吗
  • 增资有哪些途径
  • 赠送样品需要交税吗
  • 开票退回怎么做账
  • 分红转增股本什么意思
  • 代销协议书
  • 工程结算收到钱的时候怎么做账?
  • 支付给业主的赔偿金
  • 税号都对开户行错了影响抵扣
  • 个人所得税的税收标准
  • 收到个税返还手续费怎么开发票
  • 收到工程发票如何做账
  • 资产负债表的资产总额怎么看
  • 银行的财务会计
  • 成本费用包括什么项目
  • 一本书装订费多少钱
  • 境外代扣代缴企业所得税的计税依据包含企业所得税嘛
  • 银行卡账户年费是什么意思 为什么扣我银行卡的钱
  • 如何查看电脑型号信息
  • 财政返还土地奖金的规定
  • 支付税控服务费的账务处理
  • php模糊查询txt文本
  • 月末账务处理流程分录例题
  • arc架构
  • uni-app实战教程
  • 职工伙食费会计科目
  • 编译和链接的区别是什么
  • 音乐制作人评刀郎新专辑
  • 出口退税哪些税不退
  • 圣诞节英文祝福语50字
  • 企业年产值与年收入比例
  • MySQL5.1忘记root密码的解决办法(亲测)
  • 企业进出口贸易
  • 间接费用允许调整吗
  • 奖金如何做账会计分录
  • 自行建造的固定资产达到预定可使用状态
  • 交通运输行业属于什么性质
  • 纸质专票红冲
  • 失控发票要转出成本吗
  • 建筑租赁公司账务处理
  • 商业承兑汇票如何承兑?
  • 发票报销可以跨月报销吗
  • 防伪税控技术服务费减免的文件
  • 金税盘技术维护费可以不交吗
  • 应收票据属于其他货币资金吗
  • 金税盘的维护费每年怎么抵扣
  • 如何提取工会经费的钱
  • 新成立的公司需要年报吗
  • sql做判断
  • centos6.2安装
  • win10正式版激活码
  • centos 安装方法
  • upd什么意思
  • Win10技巧:如何开启隐藏的锁屏时间设置项
  • gcasInstallHelper.exe是什么进程 作用是什么 gcasInstallHelper进程查询
  • 没有协议盒可以设置协议吗
  • linux系统修改
  • cocos2d游戏源码
  • opengl入门教程(精)
  • 在布局中使用选定的比例
  • ContentProvider之通过ContentResolver获取图像、视频、音频举例
  • css的transition和animation
  • React Native react-navigation 导航使用详解
  • vue怎么实现多页面
  • android javascript 混淆配置。
  • linux的sed -i
  • python里的lambda怎么用
  • 亲测源码论坛
  • Android系统服务
  • 单张发票开票限额?
  • 关税由谁来承担
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设