vue项目 如何 打包成App ?

吓死羊了
12,145 阅读3分钟

利用 HBuilderX 进行打包

1. 修改 index 访问 资源路径

在vue_cli脚手架中新建 vue.config.js 文件 ，在文件中 添加 publicPath："./" 可修改 index.html访问资源的路径 ，这样就 可以在 public 文件中 找到 index.html 双击访问 浏览页面了

image-20210508090947789

2. 打包文件 指令 npm run build

在写好的vue项目中 ，在终端执行 npm run build

image-20210508092319661

会在目录中生成 dist 文件夹 （ 里面的代码是进过压缩的)

image-20210508092515956

3. 利用打开HBuilderX新建项目选择5+APP（A）

img

创建完成后

在这里插入图片描述

把 dist 文件夹 中的 html，js,css，img 复制到 **HBuilderX创建的5+App中**

image-20210508095659836

点击 manifest.json 进行配置

image-20210508100126328

基础配置

image-20210508100740204

图标配置

提示：直接修改 图片的 后缀 为 png 格式的方案不可行（新测）

image-20210508100949909

启动界面配置

可以设置 自动关闭启动界面的延迟时间 单位是毫秒

1249006-20190113175303217-1410223127.png

模块配置

image-20210508102033348

APP常用其它设置

image-20210508102631484

  • 选择支持的CPU类型时请参考以下建议：
    • 如果不在意apk大小，三种CPU类型都勾选
    • 如果在意apk大小，选择ARM32位即可（几乎在所有ARM指令的所有设备上都可正常运行）
    • 如果要兼容一些平板和模拟器，选择ARM32位和X86
    • 不是所有模拟都仅支持x86指令，如雷电（4.x）、MuMu等模拟器也是支持ARM指令。

发行 -> 原生App-云打包

image-20210508103417406

image-20210508103814181

提示你安装 安心打包 插件

image-20210508103909479

在控制台中会 出现 需要等待

image-20210508104346452

遇到的 问题 出现 报错 本地安装包生成失败，请重试或者切换到非安心打包模式进行打包

image-20210508104518515

  • 查看 错误日志

    （发现 路径中 有中文 ，导致打包 一直出错 ）

  • image-20210508104817235

Android云端打包常见 问题汇总

错误原因：图片格式不对，应用图标和启动图片都要求png格式，其它格式（如jpg）会报错。

解决方法：请检查应用的图标是否有格式问题，严格按照指定的尺寸使用png格式提交打包。
图标文件和启动图片都需要png格式的图片，用户可以根据HBuilder提示添加指定尺寸的图片或者通过修改manifest文件修改图片的因引用，具体修改方式可参考


务必注意不能把jpg等文件改名为png来使用。
打包后如果图标不变化，可能是因为缓存，重启下手机试试。

错误原因：应用名称中包含特殊字符如“@”等

解决方法：修改应用名称，去掉特殊字符

错误原因:打包后APP空白

解决方法:

1.请检查应用的appid是否被修改,

img

2.由于特殊字符导致解析失败 检查文件夹是否有特殊字符

​ img

3.打包完成后会返回 一条路径 ，顺着路径可以找到 后缀为 apk 的 文件，将文件保存 在（安卓）手机上 ，即可 安装 。

「点赞、收藏和评论」

❤️关注+点赞+收藏+评论+转发❤️，鼓励笔者创作更好的文章，谢谢🙏大家。

avatar
文章
阅读
粉丝