快速解决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浏览器就显示正常了。

以上这篇快速解决Vue项目在IE浏览器中显示空白的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue兼容ie9的问题全面解决方案

    前言 背景情况 vue - 2.5.11 vue-cli 使用模板 webpack-simple http请求:axios Vue 官方对于 ie 浏览器版本兼容情况的描述是 ie9+,即是 ie9 及更高的版本.经过测试,Vue 的核心框架 vuejs 本身,以及生态的官方核心插件(VueRouter.Vuex等)均可以在 ie9 上正常使用. Vue 的作者尤雨溪对于Vue 的学习建议 中有提及为了将项目更好的生态化/工程化,要尽可能学习及使用新的 ECMAScript 规范.目前 ES6/

  • Vue 2.0在IE11中打开项目页面空白的问题解决

    前言 因为工作的需要,学习Vue2.0也有一段时间,最近在用Vue2.0的官方脚手架工具构建的项目,chrome中跑一直没有问题,但ie11打开出现了bug: 问题 ie11打开vue2.0项目空白,控制台报错 vuex requires a Promise polyfill in this browser: 原因 Babel 默认只转换新的 JavaScript 句法(syntax),而不转换新的 API ,比如 Iterator.Generator.Set.Maps.Proxy.Reflec

  • vue打包后显示空白正确处理方法

    vue打包后显示空白正确处理方法

    在项目中很多时候需要用到vue打包成html不需要放在服务器上就能浏览.根据官网打包出来的html直接打开是显示空白. vue打包后显示空白正确处理方法是 1.找到配置文件 修改 这样打包处理可以打开但是页面样式会找不到 2.修改 找到对应的位置加上publicPath: '../../' 然后就成功了! 很多朋友还遇到这样的问题 vue打包后index文件一片空白,怎么回事呢? vue项目你npm run build打包后,点开index文件打开一片空白, 并报错解决方法:路径问题, 总结 以

  • 快速解决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项目中页面调用数据 在数据加载完毕之前出现undefined问题

    在项目中遇到后台数据还没有加载完毕,但是页面上调用了后台数据中的字段,这样就会报undefined. 例如:一进入页面直接回显数据. 我在created里面请求接口进行赋值 this.matterAll=[]; 会报accessItemName为undefined: 原因以及解决办法: 在上面data()中,我定义了matterAll:[],也就是空的数组, template中,我又直接用了this.matterAll[0],这个时候this.matterAll[0]=undefined,所以t

  • 解决vue项目中某一页面不想引用公共组件app.vue的问题

    Vue 单页面应用 把公共组件放在 app.vue 但是我希望某个页面没有这些公共组件怎么办(比如登陆页面)每个页面都有 导航栏 但是我希望 登陆页面只有一个背景色和一个登陆框 没有导航栏 那应该怎样设置呢? vue中文文档:点击进入 在根组件中:在导航栏使用v-show判断当前路由是否是不需要的组件来完成页面: <template> <div id="app"> <home-header v-show="!(path ==='/') "

  • 解决Vue项目中tff报错的问题

    在webpack.config.js中的模块配置中加如下的配置规则: {test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, use: "url-loader"} const path = require('path'); const htmlWebpackplugin = require('html-webpack-plugin'); const VueLoaderPlugin = require('vue-loader/lib/plugin'); modu

  • 解决vue项目中遇到 Cannot find module ‘chalk‘ 报错的问题

    如下所示: 解决办法: 删掉项目中node_modules文件夹 ; 然后再 重新下载一下 cnpm install 补充知识:vue在npm run dev时报错Error: Cannot find module 'xxx' 今天在做项目时出现了下面这个错误,找了很多博客,都说改一下代码写法就行了.不过视情况而定,有点时候有些代码改起来很麻烦,千丝万缕的关系,不是说改一下代码就行了的. 然后就试了很多方法,最后发现是node版本的原因,当时用的是node的最新版本@14.6.0,个人认为是新版

  • vue 解决在微信内置浏览器中调用支付宝支付的情况

    我的思路大概是这样的 1. 验证是否是在微信内置浏览器中调用支付宝 2.给支付页面的url加上调用接口所需的参数(因为在微信里是不能直接调用支付宝的需要调用外部浏览器) 3.在外部浏览器中完成支付跳转页面 第一步: payment: 是选择支付页面,pay-mask是用于在微信内置浏览器中调用支付宝的中间页 payment主要代码: let ua = window.navigator.userAgent.toLowerCase() ua.match(/MicroMessenger/i) == "

  • 解决vue项目中出现Invalid Host header的问题

    在vue-cli版本为2.x的情况下修改webpack.dev.conf.js中的devServer对象加入disableHostCheck: true devServer: { disableHostCheck: true, } vue-cli版本3.0的情况下修改vue.config.js的配置 module.exports = { devServer: { disableHostCheck: true } } 补充知识:vue中使用wangeditor富文本编辑器 1.先下载 编辑器 cn

  • vue-cli npm如何解决vue项目中缺失core-js的问题

    目录 vue-cli npm解决vue项目中缺失core-js 报错 原因 解决办法 vue踩坑:this dependency was not found 问题背景 vue-cli npm解决vue项目中缺失core-js 报错 This dependency was not found: core-js/modules/es.object.to-string in ./src/router/index.jsTo install it, you can run: npm install --s

  • vue项目如何去掉URL中#符号的方法

    目录 前言 正常解决步骤 1. 设置路由mode 2. 配置服务端nginx 可能碰到的问题 1. 静态资源Uncaught SyntaxError: Unexpected token < 问题 2. api接口请求404问题 3. 开发环境(npm run dev启动)刷新404的问题 4. 前端路由与服务端接口路由冲突问题 结尾 前言 最近,同事跟我说,项目的访问路径里的/#/挺不美观的,就下手尝试去掉,本以为就是一句代码搞定的事情,结果遇到不少问题. 现在把我遇到的情况记录下来,做个存档,

  • 解决vue项目报错webpackJsonp is not defined问题

    在vue单页面应用中,我们大概都会使用CommonsChunkPlugin这个插件. 传送门 CommonsChunkPlugin 但是在项目经过本地测试没有任何问题,打包上线后却会报错 webpackJsonp is not defined.这是因为公共文件必须在自己引用的js文件之前引用. 可以手动改文件引用,但是推荐以下解决办法: 找到build→webpack.prod.conf.js→找到HtmlWebpackPlugin插件,添加如下配置即可 chunks: ['manifest',

随机推荐