vue3中 打包成apk(android)

这篇具有很好参考价值的文章主要介绍了vue3中 打包成apk(android)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

本文仅演示的是打包成android 版本的apk

一、打包vue3项目

1、打包

        通过打包命令将vue3项目打包成一个dist文件夹

注意:一般的打包命令为npm run build,特殊设置的修改一下打包命令 

2、解决打包后的文件的白屏问题。

     有时打包后的文件运行出现白屏问题,可能是绝对路径导致的,在vite.config.js文件中配置base:'./'

vue3打包成app,vue3 详解与应用,vue,前端

 图一  解决白屏问题

二、打包成apk

1、创建“5+App”项目

     在hbuilderx 中新建项目,选择“5+App”,然后填写项目名称,点击底部的"创建"按钮,步骤如下图:

vue3打包成app,vue3 详解与应用,vue,前端

图二  创建 5+app项目

2、打包文件移动

  将打包的dist中的文件全部复制到新建图一的根目录中

3、生成apk文件

点击顶部 "发行",选择 "原生App-云打包",具体内容如下,之后静静等待打包成apk

vue3打包成app,vue3 详解与应用,vue,前端

 图三  打包apk 步骤

三、生成apk

        生成apk文件,然后将apk文件安装到手机上进行运行,测试一下运行结果文章来源地址https://www.toymoban.com/news/detail-602750.html

到了这里,关于vue3中 打包成apk(android)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 在 WebStorm 中开发 uni-app - 用vue2实现手机APP(apk) + 微信小程序项目开发方案 webstorm开发的uniapp + hbuilderx进行app 小程序打包

    我们主要分析了如下小程序开发框架,主要包括: 框架 技术栈 案例 微信小程序 支付宝小程序 百度小程序 头条小程序 H5 App uni-app Vue 丰富 ⭕ ⭕️ ⭕️ ⭕ ⭕️ ⭕ Taro React 丰富 ⭕ ⭕ ⭕ ⭕ ⭕ ⭕ wepy Vue 丰富 ⭕ ❌ ❌ ❌ ❌ ❌ mpvue Vue 丰富 ⭕ ❌ ❌ ❌ ⭕️ ❌  首先,就要排

    2023年04月15日
    浏览(45)
  • 在 WebStorm 中开发 uni-app - 用vue2实现手机APP(apk) + 微信小程序项目开发方案 webstorm开发的uniapp + hbuilderx进行app 小程序打包

    我们主要分析了如下小程序开发框架,主要包括: 框架 技术栈 案例 微信小程序 支付宝小程序 百度小程序 头条小程序 H5 App uni-app Vue 丰富 ⭕ ⭕️ ⭕️ ⭕ ⭕️ ⭕ Taro React 丰富 ⭕ ⭕ ⭕ ⭕ ⭕ ⭕ wepy Vue 丰富 ⭕ ❌ ❌ ❌ ❌ ❌ mpvue Vue 丰富 ⭕ ❌ ❌ ❌ ⭕️ ❌  首先,就要排

    2024年02月05日
    浏览(67)
  • WebStorm开发uni-app ,用vue2实现手机APP(apk) + 微信小程序多端项目开发方案 webstorm开发的uniapp + hbuilderx进行app 小程序打包

    我们主要分析了如下小程序开发框架,主要包括: 框架 技术栈 案例 微信小程序 支付宝小程序 百度小程序 头条小程序 H5 App uni-app Vue 丰富 ⭕ ⭕️ ⭕️ ⭕ ⭕️ ⭕ Taro React 丰富 ⭕ ⭕ ⭕ ⭕ ⭕ ⭕ wepy Vue 丰富 ⭕ ❌ ❌ ❌ ❌ ❌ mpvue Vue 丰富 ⭕ ❌ ❌ ❌ ⭕️ ❌  首先,就要排

    2024年02月11日
    浏览(46)
  • uniapp 打包成 apk(原生APP-云打包)免费

    根据需求,修改 manifest.json 配置,常见的修改有: 升级版本时, 应用版本名称 和 应用版本号 必须高于上一版的值 点浏览选择png格式的图片后,点击 自动生成所有图标并替换 ,即可便捷更换应用图标 使用 HBuilder X 进行云打包 因云打包人较多,可能需要排队 完成排队,进

    2024年02月01日
    浏览(38)
  • uni-app项目打包成apk(本地打包篇)

            最近可能要接一个uni-app的项目,之前没有接触过,因此学习了一下,好在uni-app基本算是vue和微信小程序的结合体,所以写代码方面问题不是太多,不懂的百度一下基本都能处理。写完demo之后,demo的内容应该能告诉客户我可以做,但我一开始是先用手机录制视频

    2024年02月03日
    浏览(34)
  • uni-app离线打包安卓apk

    记录一下打包apk的过程: 参考:uni-app离线打包官网地址 2-1.遇见问题 1. 加载.idea和.gradle失败, 解决: File → Project Structure 重新构建: File → Sync Project with Gradle Files 安卓结构: Project → Android 登录开发者中心选择需要打包的应用→各平台信息→查看或新增安卓打包信息 这里

    2024年04月17日
    浏览(55)
  • relectron框架——打包前端vue3、react为pc端exe可执行程序

    大家好,我是yma16,本文分享关于使用electronjs打包前端vue3、react成exe可执行程序。。 vue3系列相关文章: 前端vue2、vue3去掉url路由“ # ”号——nginx配置 csdn新星计划vue3+ts+antd赛道——利用inscode搭建vue3(ts)+antd前端模板 认识vite_vue3 初始化项目到打包 python_selenuim获取csdn新星赛道

    2024年02月02日
    浏览(48)
  • Vite4 + Vue3 项目打包并发布Nginx服务器 (前端必看)

    这里因为我们有的小伙伴可能不太需要服务器,单纯学习的话也没有必要去买一个服务器。如果需要把自己的东西部署到公网上,有很多方式,自行百度。你也可以购买阿里云或者腾讯云。逻辑都是一样的,我这里使用的虚拟机+centos系统,我已经提前在自己的机器安装好了。

    2024年02月05日
    浏览(73)
  • Android APK 签名打包原理分析(一)【APK结构分析】

    最近在看AOSP Apk安装的相关源码时,发现自己对这块知识一直停留到用的层面,并未有深入的了解,例如打包的具体过程、签名的具体过程、渠道打包,最重要的,自己这几年在做系统方面的应用时,也解决过很多apk 安装的问题,修改过部分的系统源码,可是没有把这块知识

    2024年02月02日
    浏览(40)
  • 【Android】使用Android Studio打包APK文件

    打包APK之前,首先需要新建项目,有基础的可以跳过。 无基础的可以参考:使用Android Studio运行Hello World项目 1.找到Build - Generate Signed Bundle or APK - 勾选APK 2.首次需要创建证书,后续可以使用已创建好的证书 3.填写证书信息 选择密钥库存放路径,并填写密码 填写密钥名称、密

    2024年02月19日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包