查看了很多网上写的改来改去都在手机上运行不起来,运行起来又是白屏;最后放弃,自己结合文档搞吧!

1.

项目目录下的config文件夹里的index.js文件中,将build对象下的assetsPublicPath中的“/”,改为“./”后,打包生成的 dist 文件。

注释:config文件夹里的index.js中有两个assetsPublicPath,记住是改 build对象下的 assetsPublicPath

完了之后,打包, 执行npm run build之后生成dist文件夹

2.

在新建一个独立文件夹的项目 ,选择 H5+app

把新建H5+app里面不要的css,img,js,index文件先删除掉,然后把vue打包生成的 dist 文件夹里面的 static文件复制到 H5+app里面

上图中添加位置的代码

"statusbar": { //应用可视区域到系统状态栏下透明显示效果
"immersed": true
},


解决打包成App后,单击 手机返回键退出应用的bug。(可以直接把这段代码放到你vue项目中,重新打包,再放回来,也可以直接修改这个index.html)

<script>

document.addEventListener('plusready', function(a) { //等待plus ready后再调用5+ API:

                //// 在这里调用5+ API
var first = null;
plus.key.addEventListener('backbutton', function() { //监听返回键
//首次按键,提示‘再按一次退出应用’
if (!first) {
first = new Date().getTime(); //获取第一次点击的时间戳
// console.log('再按一次退出应用');//用自定义toast提示最好
// toast('双击返回键退出应用'); //调用自己写的吐丝提示 函数
plus.nativeUI.toast("双击退出", {duration:'short'}); //通过H5+ API 调用Android 上的toast 提示框
setTimeout(function() {
first = null;
}, 1000);
} else {
if (new Date().getTime() - first < 1000) { //获取第二次点击的时间戳, 两次之差 小于 1000ms 说明1s点击了两次,
plus.runtime.quit(); //退出应用
}
}
}, false);
});
</script>

vue+hbuilder 打包成移动app的更多相关文章

  1. 关于vue2.0+hbuilder打包移动端app之后空白页面的解决方案

    楼主是使用vue-cli构建的页面,代码是vscode,然后使用hbuilder打包成移动端的安装包.首先确认在npm run build 之后没有问题(默认dist文件夹),可以使用anywhere ...

  2. 项目打包成手机app 通过什么打包?

    项目打包成手机app  通过什么打包? 1.HbuildX注册邮箱账号 2.新建-app,然后将自动生成的除manifest.json之外的所有文件删除,然后将vue项目build之后生成的dist文 ...

  3. 把H5打包成IOS APP其实可以很简单!签名?越狱?都不需要!

    很多小伙伴都在开发自己的app, 有的实现实现比较简单,就是一个h5页面,然后想要打包成app发布出去. 这个想法很单纯 打包生成个app这个是很简单的,网上一堆打包工具,分分钟可以完成 BUT…… ...

  4. 利用HBuilder将vue项目打包成移动端app

    事先准备,开发完成的web app项目(也可以利用vue-cli脚手架构建vue模板项目),npm run dev可以正常预览的项目 1,将项目目录下config文件内index.js中assetsP ...

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

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

  6. cordova+vue 项目打包成Android(apk)应用

    现在使用vue开发的项目越来越多,使用vue开发的移动端打包就成了最大的问题.现在前端打包方案有好多种,但是综合来说,我比较喜欢用cordova来进行Android和ios的打包,配置完成之后,每次只 ...

  7. vue2.0+mintui+hbuilder 打包移动端app之后出现空白页面的解决方案

    1.首先使用的是vue-cli构建的页面,用hbuildX打包成移动端的安装包(hbuildX打包成app的流程,请看自行搜索) 2.cnpm install build 生成dist文件夹,里面包含 ...

  8. 前端如何将H5页面打包成本地app?

    大家都知道H5页面怎么在手机浏览器里测试,但是如何能打包成APP测试呢?因为本人的手机是IOS系统,如果用Xcode打包需要开发证书,貌似99美元一年.意外发现一个叫Hbuild的软件,简单好用,下面 ...

  9. 将python代码打包成一个app/exe

    前言 打包的代码通常都需要写一个简单的界面,一般用PyQt来写.用PyQt写界面的方法请戳这里:PyQt5的安装及基本配置    PyQt5教程 python提供了几个用来打包的模块,主要有py2ap ...

随机推荐

  1. C++入门经典-例5.18-通过引用交换数值

    1:在C++中,函数参数的传递方式主要有两种,即值传递和引用传递.值传递是指在函数调用时,将实际参数的值赋值一份传递到调用函数中,这样如果在调用函数中修改了参数的值,其改变将不会影响到实际参数的值.而 ...

  2. Moodle LMS 开源教育系统

    http://docs.websoft9.com/xdocs/moodle-image-guide/   帮助文档 示例图:没有细研究

  3. Linux高级调试与优化——同时抓取coredump和maps文件

    Linux内核源码 Documentation/sysctl/kernel.txt core_pattern: core_pattern: core_pattern is used to specif ...

  4. 【BZOJ 3709: [PA2014]Bohater】

    首先,这是我n久之前培训的时候老师讲的题目了,今天突然看到,那就讲讲吧. 首先,我们考虑怎么打怪... 显然,我们需要保证这个怪要尽可能的打死(就是尽量不被干死),并且保证尽可能的净获得血量大的在前面 ...

  5. Linux_RHEL_设置网络

    目录 目录 Selinux Iptable NetworkManager 基本网络配置 编辑网卡子接口 ip指令 ifconfig指令 修改主机名 服务端口 Selinux 是Linux的一种权限管理 ...

  6. 子系统 安装vsftpd

    1.安装命令 sudo apt install vsftpd 2.为FTP添加用户,使用sudo useradd -m sunftp命令添加一个sunftp的用户 3. 授权文件夹  chmod 77 ...

  7. 三十五:数据库之SQLAlchemy外建之一对多关系

    准备工作 from sqlalchemy import create_engine, Column, Integer, String, Float, Text, ForeignKeyfrom sqla ...

  8. 域名查询是否注册的demo

    import json import multiprocessing import threading import requests import xmltodict # 万网查询 def chec ...

  9. java:struts框架(网路静态U盘项目)

    1.网络静态U盘项目: struts.xml: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYP ...

  10. 移动手机端通过PC转接实现标签打印的解决方案

    废话不多讲,由于种种原因项目上出现了移动手持录入标签信息通过pc端转接实现打印的需求,所以简单研究了一下,本来考虑使用webapi方式实现,但是发现这种方式调用打印机实现自动打印比较困难,所以转而求其 ...