如何解决vue2.0下IE浏览器白屏问题

公司新开发的项目需要兼容到IE9+

就在index.html页面加入

<meta http-equiv="X-UA-Compatible" content="IE=edge">

不起作用

总结方法：

1、兼容IE9/IE10可能会遇到语法或者 Promise错误，安装 babel-polyfill

npm install babel-polyfill

2、在页面入口配置main.js中引入 babel-polyfill

import("babel-polyfill")

3、解决编译错误----重要

重新安装一下webpack-dev-server

npm install webpack-dev-server@2.6.1 如果有淘宝镜像也可使用 cnpm

4、修改 build/webpack.base.conf.js下

app:['babel-polyfill','./src/main.js']

5、安装babel-preset-es2015-ie

6、根目录下新建.babelrc

{
 "presets": [

  ["env", {
   "modules": false,
   "targets": {
    "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
   }
  }],
  "stage-2"
 ],
 "plugins": ["transform-runtime"],
 "env": {
  "test": {
   "presets": ["env", "stage-2"],
   "plugins": ["istanbul"]
  }
 }
}

7、以上操作完成后 运行

npm run dev

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue之浏览器存储方法封装实例

    如下所示: export function isObject (val) { return val !== null && typeof val === 'object' } export function setStore (key, val, type = 'localStorage') { if (isObject(val)) window[type].setItem(key, JSON.stringify(val)) else window[type].setItem(key, v

  • 快速解决Vue项目在IE浏览器中显示空白的问题

    vue项目在IE浏览器中显示空白,是因为js文件没有加载,需要引入babel-polyfill这个东西,而用vue脚手架搭建的项目是没有引入此工具的 引入方法: 打开packge.json,在dependencies中加入:"babel-polyfill" : "^6.23.0" 然后重新npm install 在App.vue文件中import:import  "babel-polyfill" 这样IE浏览器就显示正常了. 以上这篇快速解决Vu

  • 详解vue填坑之解决部分浏览器不支持pushState方法

    前端使用vue-router做单页面路由并开启history模式时,会碰到一个问题:部分低版本的手机浏览器.部分app以及IE9浏览器由于不支持pushState方法,会导致页面加载不出来. 解决这个问题的思路是: 当浏览器支持pushState方法时,开启history模式,不支持则开启hash模式 对链接做判断,当跳转的链接与路由模式不匹配时,则跳转至正确的链接 nginx对域名下的路径访问均重写向至index.html 以下为具体实现方法: 判断使用何种路由模式 let isHans =

  • Vue项目添加动态浏览器头部title的方法

    0. 直接上 预览链接 + 效果图 Vue项目添加动态浏览器头部title 1. 实现思路 ( 1 ) 从路由router里面得到组件的title ( 2 ) title存vuex (本项目已经封装h5的sessionStorage和localStorage也可以存在这里面) ( 3 ) 设置 title (1)从路由router里面得到组件的title 在 router.beforeEach((to, from, next) => {} 里面 const browserHeaderTitle

  • Vue服务端渲染和Vue浏览器端渲染的性能对比(实例PK )

    Vue服务端渲染和Vue浏览器端渲染的性能对比(实例PK )

    Vue 2.0 开始支持服务端渲染的功能,所以本文章也是基于vue 2.0以上版本.网上对于服务端渲染的资料还是比较少,最经典的莫过于Vue作者尤雨溪大神的 vue-hacker-news.本人在公司做Vue项目的时候,一直苦于产品.客户对首屏加载要求,SEO的诉求,也想过很多解决方案,本次也是针对浏览器渲染不足之处,采用了服务端渲染,并且做了两个一样的Demo作为比较,更能直观的对比Vue前后端的渲染. talk is cheap,show us the code!话不多说,我们分别来看两个D

  • 解决Vue 浏览器后退无法触发beforeRouteLeave的问题

    现象 加载第一个组件(这里的第一个意思是浏览器历史记录的第一个,后文称为 待监听组件 )时,正常跳转其他页面可以触发beforeRouteLeave. 但是 按浏览器的后退按钮监听不到该事件. 解决方案 目前采用比较土且不实用的解决方案.加一层组件,再router.push到 待监听组件 ,使得 待监听组件 非第一个组件,可以正常监听beforeRouteLeave事件. 注意点: 由于打乱了原来的路由.需要在main.js中添加全局的路由监听 router.beforeEach((to, fr

  • 解决Vue2.0自带浏览器里无法打开的原因（兼容处理）

    本文介绍了解决Vue2.0自带浏览器里无法打开的原因(兼容处理),分享给大家,希望对大家有帮助 Vue 之 android内嵌H5页面不显示出现这个问题,原因有很多 首先,别急,请看下面的推荐方案: 1.找个Android真机测试下(机型版本为4.4以上),真机联调测试 Android 只需要四个步骤: 1.先保证 是否安装了chrome浏览器 2.其次 ,保证 chrome 是否 已经翻墙成功! 3.最后 使用Android 真机连接 电脑 4.最后的最后,打开chrome ,输入:chrom

  • 如何解决vue2.0下IE浏览器白屏问题

    如何解决vue2.0下IE浏览器白屏问题

    公司新开发的项目需要兼容到IE9+ 就在index.html页面加入 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 不起作用 总结方法: 1.兼容IE9/IE10可能会遇到语法或者 Promise错误,安装 babel-polyfill npm install babel-polyfill 2.在页面入口配置main.js中引入 babel-polyfill import("babe

  • 解决Vue2.0中使用less给元素添加背景图片出现的问题

    在使用less在Vue.js中给元素添加背景图片时 或者你会出现这样的写法 background-image: url('../img/' + @{bg_url} + '2x.png'); 或者这样 background-image: url('../img/' + @bg_url + '2x.png'); 这样 background-image: url(../img/@{bg_url}2x.png); 还有这样 background-image: url(../img/@bg_url2x.p

  • 快速解决Android7.0下沉浸式状态栏变灰的问题

    快速解决Android7.0下沉浸式状态栏变灰的问题

    1.绪论 现在基本上所有的应用都会去实现沉浸式状态栏,这个是应用的标配,如果你开发的应用没有,那这个吐槽点就多了,"这美工有审美观么""程序猿这么菜,沉浸式都不会?"-.. 咳咳-.. 开个玩笑啊,各有各的设计思想,不能怪程序猿. 2.问题 那么说到沉浸式状态栏的问题是什么呢?不知道大家有没有遇到过,应用在android7.0系统以下的手机上运行,沉浸式状态栏是正常的,但是在7.0以上的手机上运行就感觉没有沉浸式了,是分层的.无论怎么修改状态栏背景色都没用,看下图:

  • 解决vue2.0动态绑定图片src属性值初始化时报错的问题

    在vue2.0中,经常会使用类似这样的语法 v-bind:src = " imgUrl "(缩写 :src = " imgUrl "),看一个案例 <template> <div> <img :src="imgUrl"> </div> </template> <script> export default { data(){ return { captcha_id: &quo

  • vue2.0 下拉框默认标题设置方法

    昨天到今天,用vue2.0在写一个性别选择框,一给option添加seledted属性就报错这里 下面是报错的代码 ERROR in ./~/vue-loader/lib/template-compiler.js?id=data-v-c231dfa2!./~/vue-loader/lib/selector.js?type=template&index=0!./src/components/second.vue template syntax error <select v-model=&qu

  • 解决vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效问题

    我要实现的功能是在上传文件之前校验是否表格中存在重复的数据,有的话,需要弹窗提示是否覆盖,确认之后继续上传,取消之后,就不再上传. 项目中用的element-ui是V1.4.3 <el-upload class="upload-demo" drag ref="fileUpload" :action="urls.fileUpload" :on-success="handleUploadSuccess" :on-error=

  • 解决Vue2.0 watch对象属性变化监听不到的问题

    问题 很早之前就遇到一个问题,父组件向子组件传值,子组件监听传入对象的某个属性.发现子组件使用deep watch都不能观察到对象中属性的变化,今天终于找到为啥出现这种问题和解决办法了. 解决 为啥出现这种问题?受 ES5 的限制,Vue.js 不能检测到对象属性的添加或删除. 请参照https://v1-cn.vuejs.org/guide/reactivity.html 解决方式: 通过vue的this.$set(object, key, value)方法 通过Object.assign()

  • 解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题

    在做项目的时候,遇到需要做路由跳转,但当用户输入错误url地址,或是其它非法url路由地址,我们或许会想到跳转至404页面.不管你有没有写一个404页面,当出现未匹配路由都需重新指定页面跳转.可能大家首先想到会是路由重定向,redirect来解决这个问题.但实际上通过redirect是没办法更好解决这个问题的. 看代码红色部分 import Vue from 'vue' import Router from 'vue-router' import Hello from '@/components

  • 解决vue build打包之后首页白屏的问题

    1.问题描述 本地的vue项目在server端浏览没问题,但是执行npm run build 打包之后在本地预览是白屏.有很多js,css无法加载. 2.解决方法 在config文件夹中找到index.js打开把assetsPublicPath: '/'改成下图方框中的样子. 再次执行 npm run build 就可以了. 以上这篇解决vue build打包之后首页白屏的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: Vue2.0使用过

随机推荐