HBuilderX创建vue项目打包成移动APP

创建vue项目,利用HBuilderX打包成移动APP,在手机上运行的方法步骤

1、先创建好一个vue项目


2、打包该项目

注意:配置公共路径(config文件内index.js中assetsPublicPath修改为 assetsPublicPath: './')

dist里面就是编译打包后的vue项目文件:


3、在HBuilderX中新建一个5+App项目

在新建的test项目中,除了App配置文件manifest.json,其他文件可以全都删除掉。

然后,将之前打包好的vue项目中的dist文件夹中的所有文件复制到test项目中

这些是dist文件夹中复制过来的

4、USB连接手机,打开开发者选项,打开以下USB功能:

手机连上后,配置manifest.json文件:

5、运行index.html文件,选择你自己的手机

OK,在手机上运行成功了!

我的项目效果如下:


如果想要将vue项目打包成移动App发布的话,可以参考这篇文章:

https://www.cnblogs.com/taohuaya/p/10263519.html

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • ## 框架和库的区别?> 框架(framework):一套完整的软件设计架构和**解决方案**。> > 库(lib...
    Rui_bdad阅读 3,032评论 1 4
  • 原文http://www.cnblogs.com/libin-1/p/6596810.html 版本号 vue-c...
    tengrl阅读 3,774评论 0 0
  • 最近感觉自己越来越像一个API调用程序员,很多基础的原理以及项目构建都没实际操作过,所以这里动手自己去搭建了一个v...
    Aoyi_G阅读 1,537评论 0 2
  • 起因 前公司商城App项目使用的是H5开发,有微信公众号、Ios和Android三个版本,H5版本是自己写的一套框...
    低调的喃喃阅读 64,304评论 11 50
  • 摘抄于富兰克林读书俱乐部 作者武小五 有一次,在“樊登读书”APP,听到樊登老师分享他的一次亲身经历。 那天,他...
    冬天的海_b4e7阅读 190评论 0 1