一、测试项目是否可以正确运行    指令: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文件了,把这个安装到手机上咱们就可以用了,嘿嘿!!!

VUE项目用hbuilder 打包为手机APP的更多相关文章

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

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

  2. vue项目使用hbuilder打包后,真机测试白屏

    在命令行直接运行 npm run build后,生成的dist文件中,直接打开index.html文件 Tip: built files are meant to be served over an ...

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

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

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

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

  5. 记录vue项目 用hbuilder离线打包集成极光推送 安卓篇

    极光推送的官方demo: https://github.com/jpush/jpush-hbuilder-demo 里面也记录有详细的方法了. 我记录下自己的过程. 首先去极光那里创建一个应用 获取A ...

  6. vue+hbuilder 打包成移动app

    查看了很多网上写的改来改去都在手机上运行不起来,运行起来又是白屏:最后放弃,自己结合文档搞吧! 1. 项目目录下的config文件夹里的index.js文件中,将build对象下的assetsPubl ...

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

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

  8. vue项目通过webpack打包生成的dist文件放到express环境里运行(vue+webpack+express)

    1.首先需要的原料肯定是vue打包生成的dist文件 在vue项目目录下运行:npm run build,等待运行结束,会在项目目录下生成一个dist文件夹,里面会生成一些文件(如下图示) 小的项目文 ...

  9. vue 项目设置实现通过本地手机访问

    1.查询ip地址 win+R打开cmd 窗口 输入ipconfig 找到IPV4地址   192.168.x.xxx 2.在vue项目config文件夹中的index.js,将localhost换为i ...

随机推荐

  1. 使用flex布局调换两个按钮的位置

    组件用的时antd的Modal组件,里面的按钮需要调换一下位置 今天发现用flex布局非常方便,代码如下: display: flex; justify-content: center; flex-f ...

  2. Java多线程(四) —— 线程并发库之Atomic

    一.从原子操作开始 从相对简单的Atomic入手(java.util.concurrent是基于Queue的并发包,而Queue,很多情况下使用到了Atomic操作,因此首先从这里开始). 很多情况下 ...

  3. 如何杀掉Monkey测试

    1.adb shell 2.ps | grep monkey 3.kill pid 然后可以看到手机进程中的monkey进程被杀死了,再执行ps | grep monkey,就会发现没有monkey进 ...

  4. 一文总结之MyBatis

    目录 MyBatis 目标 MyBatis演示 Configuration.xml 映射文件 初始化配置文件 Dao Spring与MyBatis集成 pom Spring配置文件 MyBatis配置 ...

  5. [二十七]SpringBoot 之 Restful接口的跨域请求

    什么是跨域 简单的说即为浏览器限制访问A站点下的js代码对B站点下的url进行ajax请求.比如说,前端域名是www.abc.com,那么在当前环境中运行的js代码,出于安全考虑,访问www.xyz. ...

  6. 【2018ICPC青岛】

    B 题意:给n个问题,每个问题有一个固定的答案ai(<=10^5).现在有m个约束关系,每个约束关系是一个二元组(ui,vi),表示你回答ui.vi问题的答案必须一样. 现在让你输出分别修复一个 ...

  7. 谷歌钦定的编程语言Kotlin大揭秘

    第一时间关注程序猿(媛)身边的故事 谷歌钦定的编程语言Kotlin大揭秘 语法+高级特性+实现原理:移动开发者升职加薪宝典! 谷歌作为世界级的科技公司巨头,强悍的技术研发与创新能力使其一直是业界的楷模 ...

  8. 解题:USACO14MAR Counting Friends

    题面 枚举每个数字是否能被删去,然后就是如何判定图是否存在.应该从按“度数”从大到小排序,从最大的顺次向其他点连边(先连“度数”小的可能会把一些可以和大“度数”点连接的点用掉).但是这个排序每连一次都 ...

  9. bzoj 3853 : GCD Array

    搬运题解Claris:1 n d v相当于给$a[x]+=v[\gcd(x,n)=d]$ $\begin{eqnarray*}&&v[\gcd(x,n)=d]\\&=& ...

  10. bzoj 1914: [Usaco2010 OPen]Triangle Counting 数三角形

    USACO划水中... 题目中要求经过原点的三角形数目,但这种三角形没什么明显的特点并不好求,所以可以求不经过原点的三角形数量. 对于一个非法三角形,它离原点最近的那条边连接的两个点所连的两条边一定在 ...