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

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

  • 哔哩哔哩有电脑版吗(哔哩哔哩有电脑版的客户端吗)

    哔哩哔哩有电脑版吗(哔哩哔哩有电脑版的客户端吗)

  • 锁屏音乐播放器怎么关闭的(锁屏音乐播放器怎么开启)

    锁屏音乐播放器怎么关闭的(锁屏音乐播放器怎么开启)

  • 1+7pro和1+7对比(1+7pro对比1+7tpro)

    1+7pro和1+7对比(1+7pro对比1+7tpro)

  • 小米手环4怎么查询激活保修期(小米手环4怎么开机)

    小米手环4怎么查询激活保修期(小米手环4怎么开机)

  • edl-al10华为是什么型号(edl-al10是什么型号的手机)

    edl-al10华为是什么型号(edl-al10是什么型号的手机)

  • 抖音小店现在有多少粉丝可以开(抖音小店现在有优势吗)

    抖音小店现在有多少粉丝可以开(抖音小店现在有优势吗)

  • 快手私信怎么恢复聊天记录(快手私信怎么恢复未看)

    快手私信怎么恢复聊天记录(快手私信怎么恢复未看)

  • 组屏和原屏有什么区别(组合屏幕和原装屏幕价格)

    组屏和原屏有什么区别(组合屏幕和原装屏幕价格)

  • 苹果副卡收不到短信(苹果副卡收不到短信验证码)

    苹果副卡收不到短信(苹果副卡收不到短信验证码)

  • qq录屏对方知道吗(qq录屏对面知道吗)

    qq录屏对方知道吗(qq录屏对面知道吗)

  • 苹果7按键震动有嘎嘣声(苹果7按键震动在哪调)

    苹果7按键震动有嘎嘣声(苹果7按键震动在哪调)

  • 情侣空间能不能删访客(情侣空间能不能看见以前的情侣)

    情侣空间能不能删访客(情侣空间能不能看见以前的情侣)

  • 华为lldtl10是什么型号(华为lld-tl10)

    华为lldtl10是什么型号(华为lld-tl10)

  • iPhone11pro怎么设置小白点(iphone11pro怎么设置动态壁纸)

    iPhone11pro怎么设置小白点(iphone11pro怎么设置动态壁纸)

  • 拼多多确认收货了还能申请退款吗(拼多多确认收货期限是几天)

    拼多多确认收货了还能申请退款吗(拼多多确认收货期限是几天)

  • 淘宝预售在哪里找(淘宝预售在哪里付尾款)

    淘宝预售在哪里找(淘宝预售在哪里付尾款)

  • 微信号多久不登录就注销(怎么找到原来的微信号)

    微信号多久不登录就注销(怎么找到原来的微信号)

  • 苹果x几千万像素(苹果x的像素相当于安卓的多少万像素)

    苹果x几千万像素(苹果x的像素相当于安卓的多少万像素)

  • 苹果手机怎么设置应用锁(苹果手机怎么设置壁纸)

    苹果手机怎么设置应用锁(苹果手机怎么设置壁纸)

  • 带pe功能的u盘是什么(u盘带pe是什么意思啊)

    带pe功能的u盘是什么(u盘带pe是什么意思啊)

  • 快手搜昵称搜不到用户(快手搜索昵称搜不到)

    快手搜昵称搜不到用户(快手搜索昵称搜不到)

  • ps4pro怎么调4k(ps4pro怎么打开4k模式)

    ps4pro怎么调4k(ps4pro怎么打开4k模式)

  • 电脑怎样看电视节目(电脑怎样看电视节目 新闻)

    电脑怎样看电视节目(电脑怎样看电视节目 新闻)

  • 手机图片怎么加水印(手机图片怎么加箭头标注)

    手机图片怎么加水印(手机图片怎么加箭头标注)

  • 苹果备忘录不见了(苹果备忘录不见了怎么恢复正常)

    苹果备忘录不见了(苹果备忘录不见了怎么恢复正常)

  • flex 布局中子元素设置宽度无效的解决办法(flex布局子元素height100)

    flex 布局中子元素设置宽度无效的解决办法(flex布局子元素height100)

  • Chrome 网上应用店 FaWave(发微)(chrome网上应用商店在哪)

    Chrome 网上应用店 FaWave(发微)(chrome网上应用商店在哪)

  • 只报个税不交社保有什么税务风险
  • 外购商品结转成本分录
  • 财务费用和应付利息怎么算
  • 员工自己全额承担社保可以在个税申报吗
  • 小规模纳税人收到专票后如何处理
  • 个人所得税app是什么意思
  • 铁路大票抵扣几个点
  • 股权转让涉及房屋产权变更怎么办
  • 应付账款逾期利息会计分录
  • 建筑企业预缴增值税计算
  • 结转库存什么意思
  • 公益捐赠税前扣除凭证
  • 日用品增值税税率
  • 民办幼儿园怎么给老师交五险一金
  • 企业所得税可以退税吗
  • 城镇退役士兵安置条例
  • 私营独资企业是小微企业吗
  • 已认证的发票退税怎么退
  • php验证码代码怎么写
  • 水利建设基金是税还是费
  • Win11文件夹怎么加密设置密码
  • 铁路货物运输代理
  • php字符串操作函数
  • 销售产品取得收入4500万元
  • phpunicode
  • 房产证办理流程图
  • 原生php写接口
  • 基于专业性的家校双向互动,需要家长的学校教育参与
  • 其他综合收益转入盈余公积和未分配利润
  • 现金折扣账务处理
  • 发票勾选平台进入后没有什么内容
  • 社保在会计上的分类
  • 计提了年终奖还能冲回吗
  • mysql中文乱码怎样用代码解决
  • 环境检测收费依据2017
  • 金融企业买入返还股票
  • 进项税额有留底税额吗
  • 商业承兑汇票在网银上怎么查询
  • 公司废料收入如何开票
  • 资产合计数怎么算的
  • mysql怎么防止sql注入
  • sqlserver2012无法新建表
  • 房地产企业成本结转
  • 先付款后收到发票
  • 如何做应收账款分析
  • 主营业务收入借方表示
  • 收到政府补贴如何做帐
  • 车辆按揭贷款需要什么
  • 交易性金融资产的账务处理
  • 员工垫付公司费用
  • 百旺金赋税盘怎么清卡
  • 库存的周转天数
  • 总账的建账过程
  • 新公司现金日记账怎么记账的
  • 我的发票查询
  • 企业应缴纳的消费税
  • python的底层语言
  • windows2.0下载
  • win8驱动在哪个文件夹
  • linux系统叫啥
  • xp系统win键没反应
  • quickdcf.exe - quickdcf是什么进程 作用是什么
  • windows 8 开发者预览版
  • ie8-ie11浏览器
  • cocos2d官网
  • js的事件绑定
  • 使用jquery实现的项目
  • dos命令大全及用法
  • js怎么检查错误
  • 鼠标瞬间移动
  • 怎么用python做爬虫
  • 怎么在移动官网上复机
  • 税务人员廉洁自律承诺书
  • 北京国税电子税务局
  • 小规模纳税人利润如何缴税
  • 工程开具增值税专用发票
  • 注销外经证需要身份证吗
  • 税务局无编制人员工资
  • 个人绩效考核税务局
  • 应缴增值税
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设