一、测试项目是否可以正确运行    指令: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. delphi locate函数的使用

    loc1:= qry1.FieldbyName('SPBM').AsString;      //商品编码 loc2:= qry1.FieldbyName('XH').AsString;       ...

  2. Android Apollo MQTT入门

    一.Apache Apollo服务器其实是一个消息中转站 下载地址 http://activemq.apache.org/apollo/download.html 服务搭建方式,参看博客Android ...

  3. ASP.NET Core 2 学习笔记

    之前的ASP.NET网站,只要把*.html.*.css.*.jpg.*.png.*.js等静态文件放在项目根目录,默认都可以直接被浏览:但ASP.NET Core 小改了浏览静态文件的方式,默认根目 ...

  4. 数据库事物 jdbc事物 spring事物 隔离级别:脏幻不可重复读

    1.数据库事物: 事物的概念 a给b打100块钱的例子 2.jdbc事物: 通过下面代码实现 private Connection conn = null; private PreparedState ...

  5. BZOJ 2844: albus就是要第一个出场

    2844: albus就是要第一个出场 Time Limit: 6 Sec  Memory Limit: 128 MBSubmit: 1134  Solved: 481[Submit][Status] ...

  6. BZOJ 3093: [Fdu校赛2012] A Famous Game

    3093: [Fdu校赛2012] A Famous Game Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 242  Solved: 129[Subm ...

  7. 【Cf #502 F】The Neutral Zone

    本题把$log$化简之后求得就是每个质数$f$前的系数,求系数并不难,难点在于求出所有的质数. 由于空间限制相当苛刻,$3e8$的$bitset$的内存超限,我们考虑所有的除了$2$和$3$以外的质数 ...

  8. ip netns

    虚拟化网络都是基于netns实现,不管是昨日的openstack,还是今日的docker. ip netns ip-netns - process network namespace manageme ...

  9. Webpack 配置示例

    Webpack 作为前端构建工具,对于大型网站开发,大大提升了开发效率.要使用webpack需要先安装webpack工具: 先来看一个最简单的命令 $ webpack main.js bundle.j ...

  10. c++设计模式之抽象工厂模式

    抽象工厂思想理解:可能有若干个你想生产的产品类,建立个工厂负责分别生产各类产品,由外部客户来选取想要那种产品类,此程序中没有delete,如想delete可在工厂类中的析构函数中实现(若有错请纠正)# ...