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

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

  • 非营利组织注销流程
  • 工会经费计税
  • 计提当月社保会计分录
  • 费用分割单模板
  • 电信充值调账什么意思
  • 非利息净收入包括营业外收入吗
  • 计提贷款损失准备金遵循以下原则
  • 查税是按基本账户吗
  • 工会没有税号怎么开普票
  • 采购比价流程图
  • 材料报废的会计处理(一般纳税人)
  • 预收的销售商品货款通过什么科目核算
  • 海运费怎么做会计分录
  • 投资款怎么做会计科目
  • 一般纳税人附加税费减免政策
  • 购买加油卡能否开发票
  • 预计负债什么时候确认
  • mac安装windows不能用键盘
  • 房地产企业如何计算土地使用税
  • 表彰比例如何确定
  • 公司多交的公积金能退吗
  • win10锁屏壁纸自动更新
  • php实战
  • 重装win7系统鼠标键盘没反应
  • ui.exe啥意思
  • arthas常用命令
  • php中的常用魔术有哪些
  • 以其他方式取得土地使用权
  • 罚款属于应付账款吗
  • npm install 的 --save 选项是什么?
  • chat gpt 国内版免费手机
  • 为什么会有不同的人种
  • 固定资产折完了怎么办
  • day11-Servlet01
  • dedecms仿站如何做
  • 工程施工与工程结算对冲分录
  • 绿化租赁合同要交印花税吗
  • 影响存货管理的因素有哪些
  • 股东分红是否必须由公司代扣
  • c#连接access数据库实例
  • 小规模减免增值税政策
  • 计入资本公积的固定资产转出
  • 房地产企业缴纳契税会计分录
  • 印花税的征税范围口诀
  • 库存商品怎么计提坏账
  • 销售货物收到托运怎么办
  • 销售退回的会计分录 预计负债
  • 单独运费怎么做账
  • 低值易耗品属于流动资产吗
  • 净利润增长率计算方式
  • 行政事业单位会计风险来源于日常的会计活动
  • 工会经费计入科目
  • 应交税费应交印花税贷方余额
  • 银行电子承兑汇票
  • 资产减值损失的账务处理
  • linux 查看numa
  • ubuntu的系统设置在哪里
  • win7系统旗舰版和纯净版的区别
  • ubuntu无法正常开机
  • awk命令的功能是什么
  • ubuntu 命令行修改用户密码
  • win8系统桌面图标
  • win1020h2更新卡在1
  • win10一堆毛病
  • 安卓listview的用法
  • 微信小程序商品列表代码
  • shell 字符串trim
  • 使用css的三种方式
  • python三角形角度
  • python 内置函数名作为变量名
  • 利用职务之便谋取私利是什么罪
  • jquery点击事件写法
  • [置顶]游戏名:chivalry2
  • javascript电商项目
  • jquery实现全选全不选
  • javascript 做网页
  • 关于研发费用的审计程序,下列说法中错误的是
  • 三证合一,税号和营业执照不一样可以吗
  • 工商变更信息如何在网上打印?
  • 从租计征房产税怎么申报
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设