vue项目通过HBuilder打包发布
2024-05-08 21:40:22
一、打包工具HBuilder
1. 下载地址https://www.dcloud.io/hbuilderx.html
2. 根据需要进行下载，下载之后为压缩包，解压获得文件夹，在文件夹中找到HBuilderX.exe，双击运行。
3. 注册Hbuilder用户，第六步会用到
4. 点击 文件–>打开目录–>你的项目的public目录。
5. 在public目录中创建一个manifest.json 文件（文件名字必须是这个，否则会出错！）
6.在这个json文件中插入下面代码
{"@platforms" : [ "android", "iPhone", "iPad" ],"id" : "HBulider用户会自动生成一串字符", /*应用的标识*/"name" : "项目名称", /*应用名称，程序桌面图标名称*/"version" : {"name" : "1.0", /*应用版本名称*/"code" : "100"},"description" : "", /*应用描述信息*/"icons" : {"72" : "logo.png"},"launch_path" : "项目运行路径", /*应用的入口页面，默认为根目录下的index.html；支持网络地址，必须以http://或https://开头*/"developer" : {"name" : "", /*开发者名称*/"email" : "", /*开发者邮箱地址*/"url" : "" /*开发者个人主页地址*/},"permissions" : {"Accelerometer" : {"description" : "访问加速度感应器"},"Audio" : {"description" : "访问麦克风"},"Messaging" : {"description" : "短彩邮件插件"},"Cache" : {"description" : "管理应用缓存"},"Camera" : {"description" : "访问摄像头"},"Console" : {"description" : "跟踪调试输出日志"},"Contacts" : {"description" : "访问系统联系人信息"},"Device" : {"description" : "访问设备信息"},"Downloader" : {"description" : "文件下载管理"},"Events" : {"description" : "应用扩展事件"},"File" : {"description" : "访问本地文件系统"},"Gallery" : {"description" : "访问系统相册"},"Geolocation" : {"description" : "访问位置信息"},"Invocation" : {"description" : "使用Native.js能力"},"Orientation" : {"description" : "访问方向感应器"},"Proximity" : {"description" : "访问距离感应器"},"Storage" : {"description" : "管理应用本地数据"},"Uploader" : {"description" : "管理文件上传任务"},"Runtime" : {"description" : "访问运行期环境"},"XMLHttpRequest" : {"description" : "跨域网络访问"},"Zip" : {"description" : "文件压缩与解压缩"},"Barcode" : {"description" : "管理二维码扫描插件"},"Maps" : {"description" : "管理地图插件"},"Speech" : {"description" : "管理语音识别插件"},"Webview" : {"description" : "窗口管理"},"NativeUI" : {"description" : "原生UI控件"},"Navigator" : {"description" : "浏览器信息"},"NativeObj" : {"description" : "原生对象"}},"plus" : {"splashscreen" : {"autoclose" : true, /*是否自动关闭程序启动界面，true表示应用加载应用入口页面后自动关闭；false则需调plus.navigator.closeSplashscreen()关闭*/"waiting" : true /*是否在程序启动界面显示等待雪花，true表示显示，false表示不显示。*/},"popGesture" : "close", /*设置应用默认侧滑返回关闭Webview窗口，"none"为无侧滑返回功能，"hide"为侧滑隐藏Webview窗口。参考http://ask.dcloud.net.cn/article/102*/"runmode" : "normal", /*应用的首次启动运行模式，可取liberate或normal，liberate模式在第一次启动时将解压应用资源（Android平台File API才可正常访问_www目录）*/"signature" : "Sk9JTiBVUyBtYWlsdG86aHIyMDEzQGRjbG91ZC5pbw==", /*可选，保留给应用签名，暂不使用*/"distribute" : {"apple" : {"appid" : "", /*iOS应用标识，苹果开发网站申请的appid，如io.dcloud.HelloH5*/"mobileprovision" : "", /*iOS应用打包配置文件*/"password" : "", /*iOS应用打包个人证书导入密码*/"p12" : "", /*iOS应用打包个人证书，打包配置文件关联的个人证书*/"devices" : "universal", /*iOS应用支持的设备类型，可取值iphone/ipad/universal*/"frameworks" : [] /*调用Native.js调用原生Objective-c API需要引用的FrameWork，如需调用GameCenter，则添加"GameKit.framework"*/},"google" : {"packagename" : "", /*Android应用包名，如io.dcloud.HelloH5*/"keystore" : "", /*Android应用打包使用的密钥库文件*/"password" : "", /*Android应用打包使用密钥库中证书的密码*/"aliasname" : "", /*Android应用打包使用密钥库中证书的别名*/"permissions" : ["<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>","<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>","<uses-permission android:name=\"android.permission.READ_CONTACTS\"/>","<uses-permission android:name=\"android.permission.VIBRATE\"/>","<uses-permission android:name=\"android.permission.READ_LOGS\"/>","<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>","<uses-feature android:name=\"android.hardware.camera.autofocus\"/>","<uses-permission android:name=\"android.permission.WRITE_CONTACTS\"/>","<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>","<uses-permission android:name=\"android.permission.CAMERA\"/>","<uses-permission android:name=\"android.permission.RECORD_AUDIO\"/>","<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>","<uses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\"/>","<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>","<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>","<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>","<uses-permission android:name=\"android.permission.CALL_PHONE\"/>","<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>","<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>","<uses-feature android:name=\"android.hardware.camera\"/>","<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>","<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"]},/*使用Native.js调用原生安卓API需要使用到的系统权限*/"orientation" : [ "portrait-primary" ], /*应用支持的方向，portrait-primary：竖屏正方向；portrait-secondary：竖屏反方向；landscape-primary：横屏正方向；landscape-secondary：横屏反方向*/"icons" : {"ios" : {"prerendered" : true, /*应用图标是否已经高亮处理，在iOS6及以下设备上有效*/"auto" : "", /*应用图标，分辨率：512x512，用于自动生成各种尺寸程序图标*/"iphone" : {"normal" : "", /*iPhone3/3GS程序图标，分辨率：57x57*/"retina" : "", /*iPhone4程序图标，分辨率：114x114*/"retina7" : "", /*iPhone4S/5/6程序图标，分辨率：120x120*/"retina8" : "", /*iPhone6 Plus程序图标，分辨率：180x180*/"spotlight-normal" : "", /*iPhone3/3GS Spotlight搜索程序图标，分辨率：29x29*/"spotlight-retina" : "", /*iPhone4 Spotlight搜索程序图标，分辨率：58x58*/"spotlight-retina7" : "", /*iPhone4S/5/6 Spotlight搜索程序图标，分辨率：80x80*/"settings-normal" : "", /*iPhone4设置页面程序图标，分辨率：29x29*/"settings-retina" : "", /*iPhone4S/5/6设置页面程序图标，分辨率：58x58*/"settings-retina8" : "" /*,iPhone6Plus设置页面程序图标，分辨率：87x87*/},"ipad" : {"normal" : "", /*iPad普通屏幕程序图标，分辨率：72x72*/"retina" : "", /*iPad高分屏程序图标，分辨率：144x144*/"normal7" : "", /*iPad iOS7程序图标，分辨率：76x76*/"retina7" : "", /*iPad iOS7高分屏程序图标，分辨率：152x152*/"spotlight-normal" : "", /*iPad Spotlight搜索程序图标，分辨率：50x50*/"spotlight-retina" : "", /*iPad高分屏Spotlight搜索程序图标，分辨率：100x100*/"spotlight-normal7" : "", /*iPad iOS7 Spotlight搜索程序图标，分辨率：40x40*/"spotlight-retina7" : "", /*iPad iOS7高分屏Spotlight搜索程序图标，分辨率：80x80*/"settings-normal" : "", /*iPad设置页面程序图标，分辨率：29x29*/"settings-retina" : "" /*,iPad高分屏设置页面程序图标，分辨率：58x58*/}},"android" : {"mdpi" : "", /*普通屏程序图标，分辨率：48x48*/"ldpi" : "", /*大屏程序图标，分辨率：48x48*/"hdpi" : "", /*高分屏程序图标，分辨率：72x72*/"xhdpi" : "", /*720P高分屏程序图标，分辨率：96x96*/"xxhdpi" : "", /*1080P 高分屏程序图标，分辨率：144x144*/"xxxhdpi" : ""}},"splashscreen" : {"ios" : {"iphone" : {"default" : "", /*iPhone3启动图片选，分辨率：320x480*/"retina35" : "", /*3.5英寸设备(iPhone4)启动图片，分辨率：640x960*/"retina40" : "", /*4.0 英寸设备(iPhone5/iPhone5s)启动图片，分辨率：640x1136*/"retina47" : "", /*4.7 英寸设备(iPhone6)启动图片，分辨率：750x1334*/"retina55" : "", /*5.5 英寸设备(iPhone6 Plus)启动图片，分辨率：1242x2208*/"retina55l" : "" /*5.5 英寸设备(iPhone6 Plus)横屏启动图片，分辨率：2208x1242*/},"ipad" : {"portrait" : "", /*iPad竖屏启动图片，分辨率：768x1004*/"portrait-retina" : "", /*iPad高分屏竖屏图片，分辨率：1536x2008*/"landscape" : "", /*iPad横屏启动图片，分辨率：1024x748*/"landscape-retina" : "", /*iPad高分屏横屏启动图片，分辨率：2048x1496*/"portrait7" : "", /*iPad iOS7竖屏启动图片，分辨率：768x1024*/"portrait-retina7" : "", /*iPad iOS7高分屏竖屏图片，分辨率：1536x2048*/"landscape7" : "", /*iPad iOS7横屏启动图片，分辨率：1024x768*/"landscape-retina7" : "" /*iPad iOS7高分屏横屏启动图片，分辨率：2048x1536*/}},"android" : {"mdpi" : "", /*普通屏启动图片，分辨率：240x282*/"ldpi" : "", /*大屏启动图片，分辨率：320x442*/"hdpi" : "", /*高分屏启动图片，分辨率：480x762*/"xhdpi" : "", /*720P高分屏启动图片，分辨率：720x1242*/"xxhdpi" : "" /*1080P高分屏启动图片，分辨率：1080x1882*/}},"plugins" : {"speech" : {"ifly" : {}}}}},"screenOrientation" : [ "portrait-primary" ]
}7. 手机直连进行测试，手机连接数据线到电脑上，（手机开启开发者模式，开启USB调试，传输文件模式），打开HBuilderX，最下方会出现连接到手机。
8. 如果没有出现手机连接成功，建议下载一个360手机助手（HBuilderx经常出现连接不到手机，迫不得已），多进行几次手机连接，记得连接上，重新启动Hbuilder。
9. 连接之后进行，点击运行–>运行到手机进行真机直连测试，测试无误即可打包。
10.打包过程，点击发行–>原生app-云打包。ios包根据需求进行选择（ios比较麻烦），Android包名自行改，使用公共证书，开屏广告关掉，之后确定即可。
11. 打包完成，即可发布！
vue项目通过HBuilder打包发布相关推荐
- vue项目使用Hbuilder打包苹果IOS-App详细教程
本文主要记录一下本人使用vue开发的移动端App使用Hbuilder打包成苹果IOS-App的详细步骤,仅供参考,如有不足,请指教. 打包苹果IOSapp首先需要准备以下几项东西: 1.已经编写好的v ...
- vue项目利用Hbuilder打包成APP流程，以及遇到的坑
目录 1.打包项目 1.1打包的app出现白屏. 1.2点击页面跳转不了,报 Loading chunk 2 failed. 等错误. 1.3.点手机物理按钮,直接退出程序. 2.Hbuilder发布 ...
- Vue项目部署，打包发布上线
参考vuecli官方文档 一.构建打包 在发布上线之前,我们需要执行构建打包,将 .less..vue..js 等相关资源进行编译打包,转换成浏览器可以直接识别运行的普通 css.js.html. # ...
- vue项目搭建及打包运行
目录 一.概述 二.vue推荐开发环境 三.node介绍及安装 1.npm是什么: 2.node是什么 3.npm和Node.js的发展 4.node安装 5.安装vue-cli 四.新建vue项目 ...
- 为 VUE 项目添加 PWA 解决发布后刷新报错问题
为 VUE 项目添加 PWA 解决发布后刷新报错问题 参考文章: (1)为 VUE 项目添加 PWA 解决发布后刷新报错问题 (2)https://www.cnblogs.com/morang/p/9 ...
- vue 不生效 打包 样式_解决在vue项目中webpack打包后字体不生效的问题
最近在项目开发过程中遇到如下问题:开发环境中设置的字体样式使用webpack打包后到生产环境不生效.如图: 打开控制台查看元素样式,发现在开发环境的时候"微软雅黑"被解析成unic ...
- 对vue项目js文件打包时进行混淆加密
对vue项目js文件打包时进行混淆加密 环境 vue 3 vue cli 4 webpack 4.0.0 https://www.cnblogs.com/dragonir/p/14445767.htm ...
- vue项目使用nwjs打包、替换exe桌面图标以及exe内容的图标全教程
关于vue项目使用nwjs打包.替换exe桌面图标以及exe内容的图标全教程 单纯的打包exe(不含更改exe桌面图标以及内容图标) 前言:首先我们需要有一个自己的vue项目. 1)单纯前端自己玩的v ...
- vue 项目中的打包配置
当我在使用vue 项目的时候, 我们可能会打包一下线上环境发布, 一会又在本地启动, 因为线上的环境要放在站点根目录下的二级目录中, 而我们的测试环境只是在 ./ 的根目录下, 所以, 当我要打包的时 ...
最新文章
- ACE_Task::putq（转）
- 用JSON和Javscript的prototype来构建完善的Javascript面向对象表示法
- poj3617 贪心
- python的烦恼_还在为每天忘记签到而烦恼吗？python来帮你搞定！
- boost::undirected_dfs用法的测试程序
- CompletableFuture介绍
- c语言程序设计编程解读,C语言程序设计第三次实验报告解读
- vb.net 如何文件指定打印机打印文件_使用Dropbox文件请求配合Canon Inkjet实现多用户文件打印...
- 雨棚板弹性法计算简图_钢结构工程量计算4点注意事项，还不来看？
- vc的UI编程PngTextButton控件的适用情况
- 【Python】Python库之网络应用开发
- spring cloud全家桶_吃透这份Github点赞120k的Spring全家桶笔记Offer拿到手软
- python矢量裁剪栅格代码_Python中使用面状矢量裁剪栅格影像，并依据Value值更改矢量属性...
- 宣布 Java 8 停止维护后，Oracle 又毙掉了 JavaOne！
- Win Server 8中的利器:微软在线备份服务
- 制作验证码使用到的函数
- 单元测试报错Wanted but not invoked:
- safari浏览器的兼容
- 怎样转换WPS格式，WPS怎么转换PPT格式
- lm曲线公式推导_LM曲线