vue的移动端项目打包成手机的app软件apk格式
目录
前提准备：
1、vue项目npm run build打包成dist文件夹
2、注册hbuilderx账号，获取appid
步骤
一、创建h5+app空模版
二、 将打包完成生成dist文件目录复制到新建的项目里
三、检测打包的index.html是否白屏
四、 配置manifest.js应用入口页面地址
五、manifest.js里图标配置
六、云打包
下载
前提准备：
1、vue项目npm run build打包成dist文件夹
参考以下文章：
vue项目打包
2、注册hbuilderx账号，获取appid
hbuilderx下载 HBuilderX-高效极客技巧HBuilderX是当前最快的HTML开发工具，强大的代码助手帮你快速完成开发，最全的语法库和浏览器兼容性数据让浏览器碎片化不再头痛
https://www.dcloud.io/hbuilderx.html
在 HBuilderX 中创建项目时，HBuilderX 会自动联网生成 appid, 并将该 appid 保存在 manifest 文件中的 appid 字段；
步骤
一、创建h5+app空模版
左上角文件-->新建-->项目
新建5+App项目，填写项目名称和保存路径（默认c盘，我改为了D盘，可不改），点击创建
二、 将打包完成生成dist文件目录复制到新建的项目里
原dist文件夹：
复制到项目里 （新项目的空白文件夹可删除）
三、检测打包的index.html是否白屏
双击index.html文件-->点击运行-->运行到浏览器-->选择一个浏览器运行
若正常显示，继续操作；若白屏，可能打包有误，重新打包
四、 配置manifest.js应用入口页面地址
默认index.html,大多不用配置
五、manifest.js里图标配置
自动生成图标选择图片-->点击自动生成所有图标并替换，下方图标会自动生成
下方可配置不同图片
六、云打包
点击发行，选择云打包
没有证书的话，可选择使用公共测试证书
选择快速安心打包，点击打包
（第一次打包需要注册账号和安装插件）点击打包之后根据提示操作即可
若点击打包之后出现通讯录须实名认证弹框，（一般默认选中通讯录配置）可能会需要实名验证，若不需要，可根据提示将manifest.js里模块配置中的通讯录取消勾选；将权限配置里的READ_CONTANTS取消勾选
下载
等几分钟打包成功，下方会有提示，根据下方打包路径进入文件夹，将打包好的apk文件发送到手机上，即可下载查看
手机软件 成果展示
原来不知道，前端开发测试软件如此简单，快来试试吧！！！
vue的移动端项目打包成手机的app软件apk格式相关推荐
- 怎么将vue的移动端项目打包成手机的app软件apk格式的。hbuilderx 云打包。
献丑了 第一步注册hbuilderx账号需要实名认证,要不然获取appid会获取不了. hbuilder 下载 https://www.dcloud.io/hbuilderx.html vue项目np ...
- React的移动端项目打包成手机的app软件apk格式
前提准备: 1.React项目npm run build打包 打包前配置 在项目打包之前需要在package.json文件中添加 "homepage": "./" ...
- vue移动端项目怎么生成apk_将Vue移动端项目打包成手机app---HBuilder
将移动端页面打包成app 1.使用 HBuilder 直接编译打包 点击左上角 文件>打开目录>选择目录 选择用Webpack打包好的dist文件目录 由于我添加到项目了,所以会显示该项 ...
- vue前后端分离项目打包成app,部署成移动端
将vue项目打包成app,在手机上运行. 1. vue打包 npm run build 先将vue的前端项目打包成dist文件夹 2. 安装hbuilderX Hbuilder官网地址 3. hbui ...
- app vue 真机运行_使用 HBuilder 将 Vue 项目打包成手机 App
在开发移动端 app 时可以选择原生 app 和 webapp, 原生 app 体验好,开发成本高,相对的 webapp 体验要差,开发成本低.webapp 要求很低,可以说只要会开发web 站就能开 ...
- vue移动端项目打包成app
这几天 我做了一个vue移动端的小项目 就想着打包成 app安装在手机上看看 我就讲解下整个思路和过程 首先项目开发完之后 (我使用的是vue-cli 3.*版本) 在项目文件夹下创建一个 vue. ...
- vue PC端项目打包成windows桌面程序
一.npm run build 生成dist文件 注意:打包dist文件需要将绝对路径"/"改为相对路径"./" 二.把electron的官方例子扒下来,简称项 ...
- 使用HBuilder将H5的项目打包成手机可安装的webapp程序（.apk）
下载HBuilder 官网:http://www.dcloud.io/ (1)下载成功后邮箱注册登录 (2)文件->新建->移动App (3)创建成功后得到这样一个目录结构,manife ...
- 前端项目如何打包成手机app？
前端项目如何打包成手机app 阐述 难点及解决方式 具体使用步骤 创建5+app空项目 删除5+app默认的项目结构 移动并进行基础设置 发行及云打包 查看及下载 阐述 前端是做什么的?写网页的?不, ...
最新文章
- 二叉查找树(binary search tree)详解
- 文巾解题 82. 删除排序链表中的重复元素 II
- leetcode 1232. 缀点成线
- POJ 6048 泰国佛塔 【dfs搜索】【暴力大比拼】【北大ACM/ICPC竞赛训练】
- 记一次获得 3 倍性能的 go 程序优化实践，及 on-cpu / off-cpu 火焰图的使用
- Mac Big sur如何设置触控板滚动不带惯性？
- Labelme标注软件下载安装教程
- pandas学习笔记-DataFrame（2）
- 计算机存储单位试题,计算机存储试题及答案
- [SpringCould篇]之服务消费方式Ribbon+RestTemplate
- RabbitMQ 安装教程（CentOS版）
- Mongo数据库简介
- 使用FreeMarker自动生成Word文档
- Qt--3D中制作坐标系（5.12）
- 如何构建可持续的ChatGPT高性能服务器端架构?
- leetcode 16 -- 3Sum Closest
- C# 里面的 #region 含义
- Idean2018版本创建Gradle项目配置Tomcat报404错误（The origin server did not find a current representation for the）
- 2017年互联网百强榜单出炉 迅雷连续5年上榜
- 互联网思维到底是什么