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

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

  • 优酷怎么将喜欢的视频分享给好友(优酷怎么将喜欢视频删除)

    优酷怎么将喜欢的视频分享给好友(优酷怎么将喜欢视频删除)

  • 红米10xpro机身尺寸是多少(红米10xpro手机长度)

    红米10xpro机身尺寸是多少(红米10xpro手机长度)

  • word功能区中,拥有的选项卡分别是(Word功能区中,拥有的选项卡分别是( ))

    word功能区中,拥有的选项卡分别是(Word功能区中,拥有的选项卡分别是( ))

  • 苹果手机换了电板是不是和新的一样(苹果手机换了电池会不会影响到什么)

    苹果手机换了电板是不是和新的一样(苹果手机换了电池会不会影响到什么)

  • 松下驱动器报警代码err.16.0(松下驱动器报警代码err.21.0)

    松下驱动器报警代码err.16.0(松下驱动器报警代码err.21.0)

  • 苹果11有杂音滋滋咋回事(iphone 11有杂音)

    苹果11有杂音滋滋咋回事(iphone 11有杂音)

  • 请在系统相册下载icloud什么意思(请在系统中打开相册访问权限)

    请在系统相册下载icloud什么意思(请在系统中打开相册访问权限)

  • 华为充电一会充一会停(华为充电一会充一会不充是什么情况)

    华为充电一会充一会停(华为充电一会充一会不充是什么情况)

  • 亚马逊个人卖家和专业卖家区别(亚马逊个人卖家如何完成账户认证)

    亚马逊个人卖家和专业卖家区别(亚马逊个人卖家如何完成账户认证)

  • 为什么开机速度很慢(为什么开机速度变慢了)

    为什么开机速度很慢(为什么开机速度变慢了)

  • 闲鱼卖手机发货时注意什么(闲鱼卖手机发货视频怎么拍)

    闲鱼卖手机发货时注意什么(闲鱼卖手机发货视频怎么拍)

  • iphonexsmx上市时间

    iphonexsmx上市时间

  • Excel中的工作簿指的是(excel中的工作簿是指一本书吗)

    Excel中的工作簿指的是(excel中的工作簿是指一本书吗)

  • 苹果8强行关机按什么键(苹果8强行关机按键)

    苹果8强行关机按什么键(苹果8强行关机按键)

  • ps拉丝效果怎么做(ps拉丝纹理)

    ps拉丝效果怎么做(ps拉丝纹理)

  • 苹果手机丢了能找回来吗(苹果手机丢了能拍照嫌疑人吗)

    苹果手机丢了能找回来吗(苹果手机丢了能拍照嫌疑人吗)

  • oppo手机怎么找剪切板(oppo手机怎么找回微信删除的聊天记录)

    oppo手机怎么找剪切板(oppo手机怎么找回微信删除的聊天记录)

  • 华硕atk驱动安装教程(华硕atk驱动安装不了怎么办)

    华硕atk驱动安装教程(华硕atk驱动安装不了怎么办)

  • word2019邮件合并(word2019邮件合并为什么用不了)

    word2019邮件合并(word2019邮件合并为什么用不了)

  • 闲鱼如何防止骗子买家(闲鱼购物如何防骗)

    闲鱼如何防止骗子买家(闲鱼购物如何防骗)

  • 淘宝超过七天怎么退货(淘宝超过七天怎样关闭退换货端口)

    淘宝超过七天怎么退货(淘宝超过七天怎样关闭退换货端口)

  • 9700k全核5g多少电压(9700k全核频率是多少)

    9700k全核5g多少电压(9700k全核频率是多少)

  • 华为p30和p30pro拍照对比(华为p30拍照对比p30 pro)

    华为p30和p30pro拍照对比(华为p30拍照对比p30 pro)

  • 美版s10 是双卡双待吗(美版s10是双卡吗)

    美版s10 是双卡双待吗(美版s10是双卡吗)

  • 小米商城下单时效是多久(小米商城下单时提示账号存在风险)

    小米商城下单时效是多久(小米商城下单时提示账号存在风险)

  • 快手怎么取关所有人(快手怎么取关所有粉丝)

    快手怎么取关所有人(快手怎么取关所有粉丝)

  • python shell怎样在Windows打开?(python 3.4.3 shell)

    python shell怎样在Windows打开?(python 3.4.3 shell)

  • 电子税务局登陆密码总是错误怎么办
  • 金税三期系统的作用
  • 什么是差额税金
  • 小规模纳税人利润如何缴税
  • 收到生育险报销会计怎么写摘要呢
  • 备用金支出怎么记账
  • 分公司的所得税怎么申报
  • 资产负债表不平的原因有哪些
  • 累计折旧贷方余额是负数表示什么
  • 公司员工的伙食费计入什么科目
  • 拆迁车间
  • 现金账冲账怎么冲
  • 首次购买税控设备政策
  • 银行利息收入确认时间会计与税法的差异
  • 行政相对人和行政管理相对人的区别
  • 存货盘盈与盘亏
  • 分支机构的企业所得税申报流程是什么
  • 分支机构享受了税收优惠,是由总机构备案还是分支机构备案?
  • 个人所得税的征收
  • 房地产会计分录大全
  • 无法收回的款项摘要怎么写
  • macos monterey支持哪些显卡
  • 电子专用发票怎么上传
  • php 链式调用
  • wifan
  • 换购商品分录怎么做
  • win7怎么删除windows.old
  • 非常经典的php文章
  • 目标检测yolov5
  • openai发布企业版
  • 工资表社保表格怎么算
  • 土方专用发票
  • mysql基本语法
  • 租金收入如何分析
  • 以前年度未处理的业务
  • 租赁收入会计分录怎么做
  • 代宰 增值税
  • 税收类型增值税有哪些
  • db2导出数据到excel
  • sql模糊查询的关键字是什么
  • 政府补助收入的现金流属于什么
  • 研发支出是
  • 财务专用章是干嘛用的
  • 高新技术企业如何计算企业所得税
  • 珠宝行业的会计处理方式
  • 如果不签合同会怎么样
  • 公交公司财政补贴
  • 建账要求
  • 出售固定资产如何缴纳增值税
  • 金税盘离线开票时间超限的处理方法
  • 银行汇票结算业务
  • 往来的款项性质有哪些
  • 明细账的建账
  • mysql 性能调优参数
  • sqlserver触发器语法
  • win8系统蓝屏后无法修复
  • windows10的改进
  • tcp window 0
  • wmpdmc.exe是什么意思
  • linux cp用法
  • 电脑重装系统步奏
  • Winaw32.exe - Winaw32是什么进程
  • win8.1无法连接wifi
  • Win8系统网络SSID怎么设置?Win8设置网络SSID的方法
  • unity3ds
  • 简单阐述javascript的主要作用
  • cocos2dx schedule
  • nodejs报错
  • iframe嵌入页面出现跨域问题
  • html框架frameset代码
  • 批处理中copy怎么用
  • shell脚本怎么进入指定目录
  • js加载3d模型
  • unity接入google内购
  • android StrictMode使用
  • bootstrap基础教程
  • js设置按钮禁用和开启
  • 306医院改名什么了
  • 新公司办理发票税控机流程?
  • 车船税代收有发票吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设