vue项目兼容ie浏览器的问题:在其他浏览器显示都是正常的,在ie11下显示空白 5C

各位大神帮忙看看,为什么ie11下显示空白,也没有报错!!
图片说明
我的配置如下:
webpack.base.conf.js中添加了babel-polyfill:
module.exports = {
context: path.resolve(__dirname, '../'),
entry: {
app:["babel-polyfill", './src/main.js']
},
main.js下导入了babel-polyfill:import 'babel-polyfill'
.babelrc文件的配置为:

{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
["es2015", {
"modules": false
}],
"stage-2"
],
"plugins": ["transform-vue-jsx", "transform-runtime",
["import", {
"libraryName": "iview",
"libraryDirectory": "src/components"
}]
],
"env": {
"test": {
"presets": ["env", "stage-2"],
"plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs", "dyna mic-import-node"]
}
}
}



0

4个回答

解决方式:安装 "babel-polyfill" 即可。

命令:cnpm install --save-dev babel-polyfill    //我用的是淘宝镜像,所以是cnpm,如果你没有安装使用npm 即可。

在入口main.js文件引入:import 'babel-polyfill'

最后一步,在build文件夹下找到webpack.base.conf.js.

图片说明
将第10行的内容替换一下即可。

<br>
图片说明
把上图中的1替换成2即可,懒得动手就复制吧。

module.exports = {
entry: {
app: ["babel-polyfill", "./src/main.js"]
},

0
qq_15076441
qq_15076441 回复岁月抹平了我的小脾气: 题主,我遇到了相同的问题,最后解决了吗,如何做呢?
5 个月之前 回复
Beamon__
Beamon__ 回复u010603891: 我遇到了相同的问题,不知道老哥解决了么?如何做的
6 个月之前 回复
u010603891
岁月抹平了我的小脾气 我就是这么配置的,可是还是不兼容ie
8 个月之前 回复

安装babel-polyfill
npm install babel-polyfill --save-dev

module.exports = {
entry: {
app: ["babel-polyfill", "./src/main.js"]
},

在重新启动就行

0

大佬,重启了也不好使

0

图片说明 楼主解决了吗 我的也一样 babel-polyfill 也安装了

0
vipsongtaohong
vip.khan 回复weixin_43120345: 解决了 按照安装 "babel-polyfill" 的方法如果还未能解决 看看项目中使用的插件和框架 多半是那些框架的语法没能转换成es5
21 天之前 回复
weixin_43120345
weixin_43120345 解决这个问题了吗?求解方法
21 天之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
vue在IE11下不兼容 页面显示空白的问题
1.首先安装babel-polyfill依赖   npm install --save-dev babel-polyfill2.进入项目入口文件 main.js  导入    import   &quot;babel-polyfill&quot;3.在webpack的配置文件夹 将 app:&quot;./src.main.js&quot;改为 app:[&quot;babel-polyfill&quot;,&quot;./src.main.js&quot;]现在就可以看到 ...
Vue 2.0在IE11中打开项目页面空白的问题
IE11 打开 Vue 2.0 项目,空白页,并报错:vuex requires a Promise polyfill in this browser
VUE+element-ui 开发的项目 IE浏览器打开显示空白问题
因为IE浏览器版本的问题,IE浏览器不支持ES6,所以就出现了promise未定义的问题 需要下载babel-polyfill  在main.js中引用 babel-polyfill 1 npm install --save babel-polyfill 2 import  'babel-polyfill'...
使用vue-cli, ie白屏问题
安装插件babel-polyfillbabel-plugin-transform-es2015-arrow-functions(转箭头函数)并进行配置在webpack.base.config.js中修改为:context: path.resolve(__dirname, '../'), entry: { app:['babel-polyfill','./src/main.js'] },...
Vue2.0做的项目在IE11下面打开一片空白?
Vue2.0做的项目在IE11下面打开一片空白?
IE浏览器下,VUE项目页面打开空白
一 问题描述 今天偶然用IE打开所做后台系统,发现居然空白一片!!!什么都没有,好可怕,事故现场如下:
vue打包之后在IE下打开页面一片空白
1.vue项目通过Webpack打包生成的dist文件,通过IE打开一片空白。这个主要原因是路径的问题。 1.修改config下面的index.js中bulid模块导出的路径 build: { index: path.resolve(__dirname, '../dist/index.html'), // Paths assetsRoot: path.resolve(_...
使用Vue框架Select元素在ie11加载页面时显示异常
&amp;lt;div id=&quot;app&quot;&amp;gt; &amp;lt;select id=&quot;sl&quot; v-model=&quot;selected&quot;&amp;gt; &amp;lt;option disabled value=&quot;&quot;&amp;gt;请选择&amp;lt;/option&amp;gt; &amp;lt;option value=&quot;1&quot;&amp;gt;A&amp;l
解决vue-baidu-map在IE浏览器中不显示的问题
1、 安装babel-polyfill npm install --save babel-polyfill 2、 引入 2.1 import 'babel-polyfill' 2.2 require(&quot;babel-polyfill&quot;); 2.3 用于使用webpack构建的项目,加入到webpack配置文件(webpack.config.js)entry项中重...
angular4-如何让IE浏览器正常显示页面
小编遇到了这样一个问题,谷歌、360、火狐浏览器都可以正常显示页面,恰恰IE浏览器不可以正常显示页面,不可兼容。 解决办法 第一步 找到polyfill.ts文件,将注释部分,取消注释 取消完之后的代码 /** * This file includes polyfills needed by Angular and is loaded before the app. * You c...
Vue 2.0在IE11中打开项目页面空白的问题解决
在IE11中打开vue项目报错 原因是 Babel 默认只转换新的 JavaScript 句法(syntax),而不转换新的 API ,比如 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局对象,以及一些定义在全局对象上的方法(比如 Object.assign)都不会转码。为了解决这个问题,我们使用一种叫做 Polyfil
vue-cli 项目在IE浏览器打开报错解决方法
首先要知道VUE官网已表明仅支持IE8以上版本(不包括IE8),css弹性布局flex各浏览器支持如下: 假如项目用到弹性布局,则项目仅支持IE10以上版本。 另外兼容其他低版本的,请另寻它法。 网上说的本人试了都是没用的,下面是亲自试验的解决方法。 1. 问题 :ie浏览器打开vue2.0项目空白,控制台报错 vuex requires a Promise polyfill in t...
解决 vue-element-admin在IE中打开空白的问题
vue在兼容IE的时候打开一直显示空白并报错,在IE11中也是打开空白报错,网上看了许多方法都试了也不行,后来发现原来是最后一步的配置错了,咦,桑心的,现在记录一下全过程,供参考: 解决办法如下 : 1.首先安装babel-polyfill依赖 npm install --save-dev babel-polyfill 2.进入项目入口文件 main.js 导入 import “b...
VUE2.0项目在ie中打开后页面空白的问题
报错如下: 原因: Babel 默认只转换新的 JavaScript 句法(syntax),而不转换新的 API ,比如 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局对象,以及一些定义在全局对象上的方法(比如 Object.assign)都不会转码。为了解决这个问题,我们使用一种叫做 Polyfill(代码填充,也可译作...
Ext3在IE11和360浏览器中显示不兼容、排版混乱,但在火狐、谷歌和QQ中显示正常
最近在解决Ext在浏览器中兼容性的问题,在网上找了好多方法,比如使用 use strict 还有就是添加特定的和删除掉这部分的内容等,但都不能解决下面图示所出现的问题,第一次发帖,还望各位知道的大神告诉下我,谢谢各位大神 房屋查询 document.onkeydown=function(e){ // 兼容FF和IE和Opera
Vue2.0做的项目在IE下面打开一片空白?
解释一:Babel默认只转换新的JavaScript句法(syntax),而不转换新的API,比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象,以及一些定义在全局对象上的方法(比如Object.assign)都不会转码。举例来说,ES6在Array对象上新增了Array.from方法。Babel就不会转码这个方法。如果想...
vue 项目在ie 下出现空白
最近项目中遇到IE 下有空白的问题,网上查看了一些 使用babel-polyfill 这个插件 1.安装 npm install babel-polyfill 2.引入方式一 require(&quot;babel-polyfill&quot;);  引入方式二  import &quot;babel-polyfill&quot;; 3.module.exports = {   entry: [&quot;babel-polyfill&quot;,...
关于vue组件在chrome中正常显示ie中却无法显示的原因之一
今天在写组件的时候,本来一个很普通的查询界面,在chrome中显示的也很正常,突然之间,测试提了bug。说是在ie上界面这个模块的界面不显示。IE。。。。emmmmmm。 就不去骂人了,打开界面一看,的确热词,不过既然出现问题了,就解决呗。 一番查找以后发现此问题的原因是属性多次定义导致的。就如这般,相当于定义了两次disabled 下面说一下解决方法:排除法 一般在代码多或者维护代码的情况下很...
vue项目安装babel-polyfill后,在IE下打开页面依然空白的问题解决方案
最近手头的vue项目需要兼容IE,正常安装babel-polyfill并进行相应的配置后,IE浏览器打开页面依然空白。 后续又安装了babel-preset-stage-2,调试了很久,结果依然不管用。后来我在webpack.base.conf.js文件中发现了一个babel-loader的配置,默认是没有绿圈中的配置的,这是后续加的,加上这个配置就好了,IE浏览器下就可以正常访问页面了。原...
vue-cli webpack解决ie浏览器兼容问题
1. 解决promise问题npm install --save-dev babel-polyfill 下载安装polyfillwebpack.base.conf.js修改如下:module.exports = { context: path.resolve(__dirname, '../'), entry: { app: ['babel-polyfill', './src/mai...
vue.js兼容IE11浏览器的做法(npm和普通的html中的使用)
一、npm模式 1、npm安装babel-polyfill npm install babel-polyfill --save-dev 2、在入口文件main.js中引入 import 'babel-polyfill' 3、如果也是用了官方脚手架vue-cli,还需要在webpack.config.js配置文件中做修改,即可。 entry: { app: [&quot;babel-polyfill&quot;, ...
一句话实现ant design在IE上的兼容问题
&amp;lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=Edge&quot; /&amp;gt;
IE11部分图片不显示,但是谷歌浏览器可以正常显示
最近参与AngularJS项目bug修改工作,遇到了浏览器兼容问题(IE11部分图片不显示)。查找了很多技术博客,花了很多时间也没有解决。今天早上突然很“冷静”,对比了其他可以显示的图片,发现了二者在路径上存在着一个小小的不同。 IE11上正确显示图片的路径如绿色框部分: IE11上不显示图片的路径如黄色框部分: 于是处理了界面中的路径表达式 ...
用vue-cli和iview相关做项目不兼容ie问题
使用vue-cli做项目,一般不会兼容ie浏览器,究其原因就是浏览器对ES6中的promise无法支持,因此需要通过引入babel-polyfill来使我们的浏览器正常使用es6的功能 首先通过npm 安装 npm install --save-dev babel-polyfill 然后就是在你的项目中使用 在webpack.base.conf.js中配置: 第一种 entry...
react页面兼容ie步骤
The React App is not compatible IE default.If open this app in IE,it will display a blank page.So, you must modify some files . Step 1: npm install --save es5-shim es5-shim/es5-sham console-polyfill f...
vue项目兼容ie9 10不显示问题
因为工作原因,让我来解决整体网站的兼容问题。网站使用的框架是vue+iview。 话不多说,直接说问题吧。下面记录一下我的经历: 问题一:一开始整个网站在360极速模式及ie浏览器直接不显示,一片空白 解决方式是:在package.json中引用babel-polyfill,并修改webpack.base.config.js的代码(可能解决方案不局限于我这一种哈),如下: entry:...
vue项目如何在ie11兼容性视图下兼容
X-UA-Compatible是神马?  X-UA-Compatible是IE8的一个专有&amp;lt;meta&amp;gt;属性,它告诉IE8采用何种IE版本去渲染网页,在html的&amp;lt;head&amp;gt;标签中使用。可以在微软官方文档获取更多介绍。   为什么要用X-UA-Compatible?  在IE8刚推出的时候,很多网页由于重构的问题,无法适应较高级的浏览器,所以使用X-UA-Compa...
vue-cli打包后在IE中显示不出问题
解决办法: 安装:    步骤一:npm install babel-polyfill --save-dev 步骤二:在mmain.js中引入  import &quot;babel-polyfill&quot;;(如果有用vuex在store中的index.js中也最好引入一下) 步骤三:在build文件中的 webpack.base.conf.js 中的 entry对象中也添加一下 entry: { ...
关于前端页面在IE浏览器下无法显示的问题
由于框架的发展和技术的革新,很多语言必须兼容浏览器才能很好的显示出新的特性和样式,那么我们的前端页面如果在IE浏览器下无法显示时该用什么办法提示用户(提示用户升级浏览器)??? 最实用的办法就是加上判断浏览器是不是IE浏览器的语法:  <!––[if IE]> 然后如果是IE浏览器就会进入该语法内执行相关语句,IE浏览器存在很多个版本,IE5,IE6,IE7,IE8.
react+antd+mobx在ie浏览器上打不开问题
1、安装babel-plugin-transform-decorators-legacy npm install babel-plugin-transform-decorators-legacy 然后在plugins上加上; 解决mobx装饰器@报错问题 2、安装babel-polyfill和es6-symbol npm install es6-symbol npm install b...
大佬帮忙看看IE不兼容问题,验证码显示不出来
今天碰到IE不兼容的问题了,谷歌、火狐、360极速都没有问题,用IE11就验证码就出不来,我的验证码是后台生成的,通过F12调试得知正常相应回前端了,js中又报错的地方具体如下: 但诡异的是谷歌可以360极速模式也没问题,偏偏就是他,求大佬解答...
图片在IE浏览器不显示,在其他浏览器正常
之前做项目遇到一个问题,在IE(IE8-11)上测试兼容性的时候发现部分图片不显示,也不报错,在chrome、Firefox、Opera上都是正常的。 检查了很久的代码,图片路径什么的,但是如果路径不对应该不止在IE上不显示,在其他浏览器上应该也是不显示的,而且只是不显示并没有报错。 后来想起来UI设计师刚开始给的是JPG格式的图片,由于某些原因(具体哪些原因忘记了)我给改成了PNG格式的图片
解决swiper3.0版本在IE浏览器不兼容问题以及VUE箭头函数在IE浏览器里面不兼容
VUE箭头函数在IE浏览器不兼容 myArray.forEach(=&amp;gt;{ ..................... }     把=&amp;gt;改成function(xxx) IE不支持很多VUE的写法,自己可以参考一下ES6   swiper3.0版本在IE上兼容性很差的,公司最新的项目用了3.0的swiper在谷歌浏览器上OK,但是到了IE  9 10 11就没办法正常显...
使echarts图表兼容ie浏览器
echarts 在谷歌浏览器中可以所向披靡,丝毫不会出现因兼容性问题出现图像不显示的结果。而在ie中似乎却不太混得开。最近在做各种图表的展示,引入了资源echarts.js 谷歌中正常显示,而在ie中却出现了如下问题: 初始化的时候图表不显示,在F12开启的情况下 刷新页面,图表正常显示,经过调试发现 echarts.init(document.getElementById(‘firstEch
IE11兼容模式内信息空白 无法使用的处理方法
当IE11
ie下svg显示问题
后续更新中
vue+axios+webpack构建的项目打包后IE11中数据更新后页面没有刷新问题
【问题描述】页面进行删除数据操作后,重新获取列表,实际操作成功,ie11中列表不刷新,删除的数据依旧在 【问题分析】F12打开IE11的控制面板,查看请求‘已接收’后的数据来源,显示“来自缓存”,如下图,ie浏览器会对相同请求的ajax,进行缓存,当你删除数据后,在调用同样的接口,ie不会刷新,只会把第一次请求该接口的数据缓存拿出来,所以页面数据依旧在,视图不更新 【解决办法】给请求加上时...
解决 IE11 中 F12调试 空白 无法使用
安装的IE11后,F12调试显示空白无法使用,是缺少更新,安装此更新后重启电脑,就可以使用,我试过了,绝对好使 这是百度云下载链接
用vue-cli+iview做项目不兼容ie问题
转自:https://blog.csdn.net/shihailing/article/details/80436914使用vue-cli做项目,一般不会兼容ie浏览器,究其原因就是浏览器对ES6中的promise无法支持,因此需要通过引入babel-polyfill来是我们的浏览器正常使用es6的功能首先通过npm 安装npm install --save-dev babel-polyfill然...
IE兼容模式与非兼容模式下页面显示不一致的处理方法
问题描述: 1、开启兼容模式页面显示正常,而非兼容模式显示不正常(或者相反的情况)   解决方案: 打开页面后,让页面一直在兼容模式下运行或者一直在非兼容模式下面运行   如下写就可以解决上述问题了: &amp;lt;head&amp;gt; &amp;lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=EmulateIE7&quot; /&amp;gt;  //兼容模式 ...
文章热词 机器学习教程 Objective-C培训 交互设计视频教程 颜色模型 设计制作学习
相关热词 mysql关联查询两次本表 native底部 react extjs glyph 图标 区块链浏览器开发 微信开发浏览器视频