关于vue2.0+hbuilder打包移动端app之后空白页面的解决方案
楼主是使用vue-cli构建的页面,代码是vscode,然后使用hbuilder打包成移动端的安装包。首先确认在npm run build 之后没有问题(默认dist文件夹),可以使用anywhere开一个服务器看看。
在确保咩有问题的情况下,将dist文件夹直接拖进 hbuilder (hbuilder下载地址)中,

,在dist上面右击,点击 转换成移动app,dist的图标会由 W 变成 A,如图:

,dist文件夹中会新增manifest.json(这个是app的配置文件,修改app图标等,双击可以进入修改界面(参考文档)),如图:

,点击 index.html,运行,浏览器运行,如图

,点击之后空白(楼主用的是chrome),但是加载没有问题,


解决方案有:
1、在build下的配置路径出了问题
修改assetsPublicPath为: './ '

2、由于hbuilder的默认格式,路由不能使用history模式
将mode:‘history’ 注释即可

关于vue2.0+hbuilder打包移动端app之后空白页面的解决方案的更多相关文章
- vue2.0+mintui+hbuilder 打包移动端app之后出现空白页面的解决方案
1.首先使用的是vue-cli构建的页面,用hbuildX打包成移动端的安装包(hbuildX打包成app的流程,请看自行搜索) 2.cnpm install build 生成dist文件夹,里面包含 ...
- HBuilder打包vue项目app后空白,并请求不到数据
(解决空白问题)在打包之前一定要修改 config 目录下的 index.js 文件中的 bulid 模块打包配置项,否则会出现空白,如图 修改前 assetsPublicPath= '/',. ...
- 基于vue2.0的一个豆瓣电影App
1.搭建项目框架 使用vue-cli 没安装的需要先安装 npm intall -g vue-cli 使用vue-cli生成项目框架 vue init webpack-simple vue-movie ...
- Android通过Chrome Inspect调试WebView的H5 App出现空白页面的解决方法(不需要FQ)
本文系博主原创,未经许可不得转载.如未经本人同意,私自转载或盗取资源提供下载,本人保留追究其法律责任的权利. 调试基于WebView的Hybrid App最舒服的工具当然是Chrome自带的开发者工具 ...
- VUE项目用hbuilder 打包为手机APP
一.测试项目是否可以正确运行 指令:npm run dev 首先我们先建立一个vue的项目,本人用的是vue-cli随便建立的,然后运行项目 不必非得是像我这样的,这一步的目的只是测试一下咱们的 ...
- vue+hbuilder 打包成移动app
查看了很多网上写的改来改去都在手机上运行不起来,运行起来又是白屏:最后放弃,自己结合文档搞吧! 1. 项目目录下的config文件夹里的index.js文件中,将build对象下的assetsPubl ...
- Vue2.0项目打包后只能访问首页,其他页面路径错误找不到
原因是你使用了vue-router的history,可以尝试去掉 // mode:"history",
- HBuilder 做移动端app流程
1.新建一个移动项目 2.编写代码 3.发行-发行为原生安装包,配置参数 选择icon 和引导页
- 报表移动端app如何实现页面自适应?
1. 描述 PC上制作好的报表,在手机端查看的时候,报表软件默认的自适应效果不尽人如意.例如,报表比较大,到手机上被缩的非常小,字都看不清等等.为此FineReport增加了选项可以手动控制报表在移动 ...
随机推荐
- SOP - Validation
Table of Contents目录表1 Roles and Responsibilities related to validation与验证相关的1个角色和职责2 Introduction2引言 ...
- Navicat Premium 出现2059错误解决办法
1,登陆后可查询默认加密规则,键入 use mysql; select user,plugin from user where user ='root'; 解决办法: 1,更新用户密码:ALTER U ...
- 压力测试工具 Apache_jmeter软件配置+TCP示例说明
该软件jmeter是Apache官方开源压力测试软件. jmeter官网:http://jmeter.apache.org/ . 本文使用的版本是 3.0版本, 它需要jdk7及以上版本支持. 网 ...
- JavaScript基础视频教程总结(061-070章)
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- ORACLE 快速刷新物化视图的方法(11g)
1.on demand:用户需要刷新的时候刷新,这里就要求用户自己动手去刷新数据了(也可以使用job定时刷新) refresh [fast|complete|force] 视图刷新的方式: compl ...
- [转]数据库中间件 MyCAT源码分析——跨库两表Join
1. 概述 2. 主流程 3. ShareJoin 3.1 JoinParser 3.2 ShareJoin.processSQL(...) 3.3 BatchSQLJob 3.4 ShareDBJo ...
- SVN服务端和客户端的说明与操作
版权声明:本文为博主原创文章,转载请注明原文出处. https://blog.csdn.net/zzfenglin/article/details/50936888 本节我们进一步了解SVN服务端和客 ...
- Cookie的使用(14)
一:cookie的简要介绍: (1)什么是cookie a.cookie是一种客户端的状态管理技术b.当浏览器向服务器发送请求的时候,服务器会将少量的数据以set-cookie消息头的方式发送给浏览器 ...
- N!中末尾有多少个0
问题:先从100!的末尾有多少零 => 再推广到 任意N!的末尾有多少个零 分析:首先想到慢慢求解出100!或N!,但计算机表示数有限,且要防止溢出. 则从数学上分析:一 ...
- Java学习之JDBC 2019/3/10
Java学习之JDBC 大部分的程序都是用来通过处理数据来达到人们预期的效果,数据是粮食,没有数据操作的程序就像helloworld程序一样没有用处.因此数据库操作是重中之重,是程序发挥功能的基石,j ...