vue框架开发出现白屏的解决方法汇总

利用vue框架写一个简单的新闻客户端,修改了部分配置重启项目后发现又白屏的情况。特此做个简单的汇总。

1.npm run build打包页面空白

发现页面head中引用的js和css文件是出现了路径错误,这里修改如下:

解决位置:config/index.js文件:把assetsPublicPath: ‘/‘改为assetsPublicPath: ‘./‘

2. iOS的Safari下无法打开网页

webpack-dev-server >= 2.8.0 的版本在 iOS Safari 下无法打开网页,效果为白屏。

控制台报错:Can‘t find variable: SockJS 应该是 Safari 的 BUG,比如下面的代码就会抛出

解决方法

1.使用老版本:

2.其它方法

修改 webpack 相关配置

3.升级vue2+部分手机访问出现页面空白

npm run dev后可能出现无法加载到路由模板的信息。

解决位置:config/index.js文件:把 devtool: ‘#eval-source-map‘  改为devtool:‘inline-source-map‘

4.升级vue2+IP访问页面空白

默认只能通过localhost或者127.0.0.1才能访问,如果使用本机的Ip地址会出现无法访问到的情况。

解决位置:config/index.js文件:把config/index.js中“host” 配置为“0.0.0.0”就可以解决,或者设置为你电脑的IP地址也行:

5.Vue在IE、低版本Android显示空白问题

这是由于IE对promise的支持不好,我们需要安装:babel-polyfill和es6-promise:

然后在main.js文件中引用:



原文地址:https://www.cnblogs.com/laysunny/p/9060414.html

时间: 2024-10-24 22:59:57

vue框架开发出现白屏的解决方法汇总的相关文章

IntelHaxm加速器引起的Win8.1蓝屏及解决方法

使用 Eclipse 或 ADT Bundle 进行 android 开发时,安卓模拟器的效率一直是个头疼的问题.为此,Intel 专门推出了针对 Intel 处理器的安卓模拟器加速程序 Intel Haxm (Hardware Accelerated Execution Manager). 但是在 Windows 8.1 下安装了 IntelHaxm 模拟器加速应用之后,长时间运行 Android Emulator 会导致系统蓝屏.(ADT Bundle 版本20131030,64位 Wind

Eclipse中输入变量会自动补全上屏的解决方法

我自己在启动Eclipse代码补全后输入感觉确实爽多了,但是每次输入变量后一按下空格,编译器会自己帮你写一个很蛋疼的名字,比如你输入了:String mStr后按下空格,它就变成了mString,十分讨厌.下面是正规的解决办法,但是经过我反复折腾,我实在没办法把插件的源码显示到工程中.于是偷个懒去网上下载了已经修改好的jar包,成功搞定. 我自己复制jar包的目录是:D:\Work Appliactions\adt-bundle-windows-x86-20140702\eclipse\plug

Android项目:proguard混淆之常见问题及解决方法汇总

1.使用proguardgui混淆器对jar包进行混淆,出现EXCEPTION FROM SIMULATION错误: [2014-07-08 14:29:55 - Test024_HouseBox_v02_jar] Dx  EXCEPTION FROM SIMULATION: [2014-07-08 14:29:55 - Test024_HouseBox_v02_jar] Dx local variable type mismatch: attempt to set or access a va

常见小票打印机打印故障及解决方法汇总视频教程

通过对"常见小票打印机故障及解决方法汇总视频教程"课程学习,达到以下目的:1.可以独立自主安装打印机驱动以及安装打印机硬件设备 2.可以独立自主排除常见打印机故障学习教程 常见小票打印机故障:[小票打印机不打印故障]1.电脑系统参数设置不正确导致小票打印机不打印故障2.端口不正确导致不打印故障3.属性参数不正确导致不打印故障4.红灯一直闪烁不打印故障5.打印机图标突然消失不打印故障6.默认打印机不正确不打印故障 [虽然打印,但是打印不正常]1.虽然打印,但是打印的字挤压在一起,显示不正

MyEclipse打开JSP文件报"Failed to create the part's controls"解决方法汇总

我把HTML代码放到JSP中的,昨晚还能用,今天就打不开了,在网上找了半天解决方法,总算解决了. 图片分享: 方法1. 在"开始"-->"运行"---->"cmd"进入命令提示行后,再进入myeclipse安装目录的eclipse文件夹,然后输入myeclipse -clean即可 方法2. 找到myeclipse安装目录的configuration文件夹删除除config.ini以外的所有文件(记得备份),重启myeclipse.

java中文乱码解决方法汇总

publicstaticvoidmain(String[]argv){ try{ System.out.println("中文");//1 System.out.println("中文".getBytes());//2 System.out.println("中文".getBytes("GB2312″));//3 System.out.println("中文".getBytes("ISO8859_1″));

编程中遇到的Python错误和解决方法汇总整理

这篇文章主要介绍了自己编程中遇到的Python错误和解决方法汇总整理,本文收集整理了较多的案例,需要的朋友可以参考下 开个贴,用于记录平时经常碰到的Python的错误同时对导致错误的原因进行分析,并持续更新,方便以后查询,学习.知识在于积累嘛!微笑+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++错误: 复制代码代码如下: >>> def f(x, y):      print x, y  >>> t

Extjs4.2 Desktop 桌面图标拖动白屏的解决

上次做了个extjs4.2的desktop桌面demo,把desktop从原始包中剥离出来,并实现了桌面图标换列,桌面图标拖动,但用户反映桌面图标拖动会出现白屏,经测试,在 extjs4.2和Extjs5.0中都存在这个问题, 经反复跟踪调试,发现自己增加的代码并没有问题,问题出在extjs的自定义class里面, 在extjs4.1的  Ext.define('Ext.dd.DragZone' ...的定义中 有 afterRepair : function(){ var me = this;

基于Vue框架开发的仿饿了么前端小应用

主要使用vue框架进行开发.使用最新的框架版本,修正了vue1.0到vue2.0过度过程出现的几处bug. 视频教程则是黄轶老师的<vuejs高仿饿了么APP>. 源代码地址:https://github.com/waihoyu/sell 原文地址:https://www.cnblogs.com/waihoyu/p/9350175.html