在命令行直接运行 npm run build后,生成的dist文件中,直接打开index.html文件

Tip: built files are meant to be served over an HTTP server.
Opening index.html over file:// won't work.
打包完后,提示只能在服务端可以开启,file模式下无法工作

问题: 使用vue脚手架开发的spa项目,在打包为app时,出现白屏现象

原因: 想要在手机端打开,等同于在本地file模式下打开,因而需要作出判断

会出现两种结果,在pc端

  • 打开后白屏;
  • 可以打开页面

处理方案 :

打开后白屏

  1. 原因在于打开需要在服务端,而不是本地打开file模式下。需要修改 webpack中的代码。根路径,改为相对路径
 // config文件夹 ==> index.js  ==>  build 中修改 assetsPublicPath 为相对路径
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/', 修改为'./' 根路径变为相对路径
  1. vue-router中模式修改为hash 如果是history下,页面无法显示图片等
 // src文件夹 ==> router文件夹 ==> index.js中找到  new Router
export default new Router({
mode: 'history', //修改为hash 或者直接去除
routes: []

可以打开页面

在上面两个都已经解决完后,使用hbuild打包为app后,在手机端依旧打开白屏。此时已经不是模式等问题,而应该考虑其他问题,比如es6语法支持程度等等

3. 因为promise支持程度不是很好,需要使用 babel-polyfill进行支持

    //build文件夹 ==> webpack.base.conf.js中添加

    //下载包后,引入
require('babel-polyfill') //入口文件中 添加
entry: {
//为了 es6 的promise
app: ['babel-polyfill','./src/main.js'] / / app: './src/main.js'
},

经过这些处理,在手机端应该就可以查看了

vue项目使用hbuilder打包后,真机测试白屏的更多相关文章

  1. unity工程接入Android sdk后真机测试解锁屏后退出的解决

    unity工程接入如91.移动支付等Android sdk后,真机运行尤其是在4.0+以上坏境,往往会出现解锁屏后退出的情况,解决办法如下: 可以在AndroidManifest.xml中所有的con ...

  2. vue项目再HBuilder打包成app后,有ui模块未添加的弹窗

    直接在打包后的mainifst.json的文件夹中加入标注部分,我是这样解决了的

  3. VUE项目用hbuilder 打包为手机APP

    一.测试项目是否可以正确运行    指令:npm run dev 首先我们先建立一个vue的项目,本人用的是vue-cli随便建立的,然后运行项目 不必非得是像我这样的,这一步的目的只是测试一下咱们的 ...

  4. 记录下自己VUE项目用Hbuider打包后启动白屏问题

    刚用VUE做项目,之前测试时vue创建的自身项目打包都是启动OK没问题.今天打包自己的时,启动一直白屏.折磨了好久,百度了一堆.终于找到了方法. 首先是在config/index.js里面 build ...

  5. Vue项目开发之打包后背景图片路径错误的坑

    在开发vue项目的过程中,使用浏览器进行预览的时候所有图片的路径是没有任何问题的,但是在打包后传到服务器上,在微信端查看背景图片时,background的图片竟然不显示,img标签里的图片却是正常展示 ...

  6. Vue项目用webpack打包后,预览时资源路径出错(文末有vue项目链接分享)

    最近用vue写了一些项目,项目写完之后需要打包之后才能放到网上展示,所以在这里记录一下项目打包的过程以及遇到的一些问题. --------------------------------------- ...

  7. Vue项目创建build打包后可修改的配置文件

    需要一个配置文件,能在项目打包(build)时不被打包,方便修改,同时项目刷新时读取改配置. 实现方法如下: 1.在项目的static目录下创建project.config.json文件(名称随意,建 ...

  8. vue项目 使用Hbuilder打包app 设置沉浸式状态栏

    使用 Hbuilder新建好移动app项目后,mainfest.json这个文件里的 plus里设置 statusbar ..... "plus": { "statusb ...

  9. vue项目用webpack打包后跨域问题

    在app.js的最开始加上 app.all('*', (req, res, next) => { res.header("Access-Control-Allow-Origin&quo ...

随机推荐

  1. Spring入门学习推荐

    该作者的 spring 博客很好,作为学习用 简介 https://blog.csdn.net/column/details/15088.html?&page=1 https://blog.c ...

  2. 高并发下hystrix熔断超时及concurrent.RejectedExecutionException: Rejected command because thread-pool queueSize is at rejection threshold问题

    我的一个项目并发200+,观察服务器的日志发现出现了大量的熔断超时偶尔会闪现出RejectedExecutionException: Rejected command because thread-p ...

  3. 【转】Google的2012论文

    转自:http://www.sigvc.org/bbs/thread-1152-1-1.html Google的论文一直是业界的风向标,尤其在机器学习.分布式系统.网络等方面很多创新性的成果都是由他们 ...

  4. laravel 环境配置

    一.composer 安装 1.确定为最新版本的PHP 2.进入Composer官网下载页面,在页面最下方Manual Download区域选择需要的版本下载. 3.将下载的composer.phar ...

  5. ABP官方文档翻译 1.2 N层架构

    N层架构 介绍 ABP架构 其他(通用) 领域层 应用层 基础设施层 网络和展现层 其他 总结 介绍 应用程序代码库的分层架构是被广泛认可的可以减少程序复杂度.提高代码复用率的技术.为了实现分层架构, ...

  6. PHP(Mysql/Redis)消息队列的介绍及应用场景案例

    在进行网站设计的时候,有时候会遇到给用户大量发送短信,或者订单系统有大量的日志需要记录,还有做秒杀设计的时候,服务器无法承受这种瞬间的压力,无法正常处理,咱们怎么才能保证系统正常有效的运行呢?这时候我 ...

  7. 20145314郑凯杰《信息安全系统设计基础》第9周学习总结 PART B

    20145314郑凯杰<信息安全系统设计基础>第9周学习总结 PART B 明确教材学习目标 注意每个系统调用的参数.返回值,会查帮助文档 阅读教材,完成课后练习(书中有参考答案),考核: ...

  8. Android系统启动过程[典☆☆☆]

    Android系统启动过程 首先Android框架架构图:(来自网上,我觉得这张图看起来很清晰) Linux内核启动之后就到Android Init进程,进而启动Android相关的服务和应用. 启动 ...

  9. JAVA基础补漏--可变参数

    使用场景:当参数列表数据类型已确定,但参数的个数不确定,就可以用可变参数 格式: 修饰符 返回值类型 方法名(数据类型...变量名){} 原理:可变参数底层为一数组,可根据变量个数的不同,创建不同长度 ...

  10. java中枚举类的实际应用

    知识点:在Java中,使用枚举类,当遇到实例类型有限的类时,并且数据库中用状态码代表一种含义时,如星期,性别,员工登陆某系统的状态等等, 可以考虑使用枚举类 本例子可以仿照,也可以使用自定义的类型处理 ...