一、测试项目是否可以正确运行    指令:npm run dev

首先我们先建立一个vue的项目,本人用的是vue-cli随便建立的,然后运行项目

不必非得是像我这样的,这一步的目的只是测试一下咱们的vue项目是否可以运行

二、修改路径(assetsPublicPath: './')

打开我们config中的js文件,修改assetsPublicPath的路径为"./"(下图的右下角位置)

三、打包文件  指令:npm run build

打包后会生成dist文件

四、把dist文件变成app模式

在HBuilder中点击文件,打开目录,找到我们项目中的dist文件,确定。

然后我们会看到这样的带着 W 的文件

五、转换APP

右键dist,点击转换成App(T)

六、在manifest.json里面配置APP名字及APP图标

我们在上一步会生成一个manifest.json文件,打开它,我们在这里操作

app名字:就是应用名称(这里我写的是思源000)

app图标:现在下面点击图标配置,然后选择图片放上去(图片只能为PNG格式,通过手动改后缀是不可以的),在这里我选择的是圣诞小人的图标

七、生成apk

1.点击发行,发行为原生安装包

2.点击使用DCloud公用证书,点击打包

好了打包成apk文件了,把这个安装到手机上咱们就可以用了,嘿嘿!!!

如果以上方法打包后还白屏,请用下面的方法

在build文件夹中打开webpack.prod.conf.js

找到output:增加 publicPath: './'

然后重新用npm打包

HBuilder打包app(vue项目)的更多相关文章

  1. 【原创分享·支付宝支付】HBuilder打包APP调用支付宝客户端支付

    前言 最近有点空余时间,所以,就研究了一下APP支付.前面很早就搞完APP的微信支付了,但是由于时间上和应用上的情况,支付宝一直没空去研究.然后等我空了的时候,发现支付宝居然升级了支付逻辑,虽然目前还 ...

  2. hbuilder打包app基本流程

    声明:本文可能用到一些工具和第三方网站,都是为了达到目的而使用的工具,绝不含有广告成分 1.下载.最新的Hbuilder X貌似不能直接创建移动app了(自己不会用),建议旧版.可去腾某讯软件中心下载 ...

  3. springboot+layui实现PC端用户的增删改查 & 整合mui实现app端的自动登录和用户的上拉加载 & HBuilder打包app并在手机端下载安装

    springboot整合web开发的各个组件在前面已经有详细的介绍,下面是用springboot整合layui实现了基本的增删改查. 同时在学习mui开发app,也就用mui实现了一个简单的自动登录和 ...

  4. 使用Hbuilder打包app

    使用Hbuilder来打包自己的H5项目 第一步 在Hbuilder上新建一个"移动APP"wolf(项目命名随意)(如果没用引用mui框架的东西,"选择模板" ...

  5. 使用jenkins一键打包发布vue项目

    jenkins的安装 Jenkins是一款开源 CI&CD 软件,用于自动化各种任务,包括构建.测试和部署软件. Jenkins 支持各种运行方式,可通过系统包.Docker 或者通过一个独立 ...

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

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

  7. HBuilder打包App方法

    HBuilder是DCloud(数字天堂)推出的一款支持HTML5的Web开发IDE.该软件既可以支持web代码编写,也可以将已经编写好的项目代码打包为手机APP. HBuilder提供的打包有云端打 ...

  8. HBuilder打包App流程记录

    摘要:基于HBuilder建立一个简单的移动app项目,并打包成apk,使用这套平台用H5开发真正的移动项目,相当于省去了原生部分的人力和工作配合,性能的话,后续我会基于这套技术开发相关的应用来验证, ...

  9. hbuilder 打包app简易教程

    1. 新建app 2. 新建弹窗面板中选择MUi登录模版 ps:在弹出的窗口,填入应用名称,根据需求选择项目位置,以及模板内容. 3. 检验app效果 菜单栏 -> 运行 -> 手机运行 ...

随机推荐

  1. request.getParameter() 和request.getAttribute()

    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/wrs120/article/details/79287607[相同点] 1.都是HttpServle ...

  2. 002--PowerDesigner显示注释comment

    PowerDesigner显示注释comment 参考博客:https://blog.csdn.net/chao_1990/article/details/52620206 原始样式 显示操作 调出执 ...

  3. poj-2289.jamies contact groups(二分答案 + 二分多重匹配)

    Jamie's Contact Groups Time Limit: 7000MS   Memory Limit: 65536K Total Submissions: 9227   Accepted: ...

  4. 【Matlab技巧】工作区变量如何添加到Simulink中?

    对新手来说,在进行simulink仿真时想把工作区的变量添加到Simulink中,这样在如transfer模块中使用时可以直接输变量即可. 如这样: 那么如何对Simulink仿真文件自动赋值呢? 1 ...

  5. sys模块与shutil模块

    #coding=utf-8 import sys ## sys.argv #从命令行获取参数 import shutil #文件.文件夹.压缩包.处理模块 f1 = open("test.t ...

  6. C# String的几种比较方法对比(Compare,CompareTo, CompareOrdinal、Equals)

    原文:http://blog.csdn.net/wushang923/article/details/7527499 注意点:切换方法的时候要注意返回值引起的变化!!! 1.Compare会通过传递进 ...

  7. BCR-ABL融合基因及检测

    费城染色体 费城染色体(Philadelphia chromosome, Ph (or Ph') chromosome),或称费城染色体易位(Philadelphia translocation),是 ...

  8. EPROCESS ETHREAD PEB重要成员

    -----------------------------------------------------------------------win7 x86中-------------------- ...

  9. IMAP协议学习笔记(一)

    IMAP IMAP(Internet Mail Access Protocol,Internet邮件访问协议)以前称作交互邮件访问协议(Interactive Mail Access Protocol ...

  10. 团队中的 Git 实践

    转载自:https://segmentfault.com/a/1190000004963641 本文首发于欧雷流.由于我会时不时对文章进行补充.修正和润色,为了保证所看到的是最新版本,请阅读原文. 在 ...