Vue项目打包APK----Vue发布App

时隔多年我又来跟新了,今天给大普家及下前端Vue傻瓜式发布App,话不多说直接上干货。

首先准备开发工具HBuilder X去官网直接下载即可,算了直接给你们上地址吧HBuilderX-高效极客技巧。

打开软件,文件-->新建-->项目-->

新建完项目后,除manifest.json以外的文件全部删除,换句话说,只留manifest.json。

接下来打包Vue文件,npm run build ,打包后把dist文件下的所有文件复制粘贴到刚刚HBuilder新建的项目里

紧接着就可以打包啦。点击任务栏中,发行-->云打包。

没有证书的话选择公共证书,有证书的话自行解决,打包方式选择快速打包

耐心等待打包完成后会在根目录下生成unpackgae文件往里面点/release/apk就可以看到你打包成功的文件了,或者看控制台会直接显示打包后的路径

此时几乎已经成功99.99%,但并不能真正运行,因为安装到手机后会白屏,白屏的原因是因为Vue打包后会把路径格式化,可以直接修改Vue打包后的index.html路径,其实自己可以提前测试一下,Vue打完包后直接双击index.html只要在PC不报错并且能正常显示页面,那么HB打包安装到手机绝对也不会报错也不会白屏。

这里我给大家出套因Vue打包后路径不对导致白屏的解决方案。

其实我们只需要在vue.config.js中配置下路径即可。
module.exports = {
    publicPath: './',
}

同样路由跳转也会导致找不到页面,其实只需要更改下路由模式就行将history修改为hash, 再进行打包。

解决方案如下:

找到Vue中配置路由的文件,一般是router/index.js

const router = new VueRouter({
  mode: 'hash',
  base: process.env.BASE_URL,
  routes
})

解决完所有的问题后,HB打包安装到手机就OK了,至此本文结束,本文皆是白话文,纯纯傻瓜式教程,喜欢的点个赞,不喜欢的也勿喷,有问题直接留言或者私信即可。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/5445.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【XR806开发板试用】基于XR806实现智能小车

一、实验功能: 1、 基于XR806实现WIFI连接路由器 2、 XR806设备创建TCP socket服务器,局域网内通过PC端TCP客服端连接XR806 TCP服务器进行指令控制小车运行(指令A:前进、B:后退、C&…

实验15 MVC

二、实验项目内容&#xff08;实验题目&#xff09; 编写代码&#xff0c;掌握MVC的用法。 三、源代码以及执行结果截图&#xff1a; inputMenu.jsp&#xff1a; <% page contentType"text/html" %> <% page pageEncoding "utf-8" %> &…

Element-UI 快速入门

Element-UI 快速入门 引言 在现代Web开发中&#xff0c;前端界面的构建对用户体验至关重要。Element-UI是一个基于Vue.js的组件库&#xff0c;它提供了丰富的界面组件&#xff0c;帮助开发者快速构建出美观且功能全面的网页应用。本文将作为你的快速入门指南&#xff0c;带你…

nvm pnpm powershell

nvm 下载 在 nvm 安装路径下修改 settings.txt root: e:\xxx\nvm path: e:\xxx\nodejs npm_mirror https://npmmirror.com/mirrors/npm/ node_mirror https://npmmirror.com/mirrors/node/nvm list available nvm install 18.20.2 nvm use 18.20.2npm config list npm config …

pta题库答案c语言

PTA&#xff08;Programming Teaching and Assignment&#xff0c;程序设计与教学&#xff09;平台提供了大量的C语言练习题和题目&#xff0c;这些题目覆盖了C语言的各个知识点&#xff0c;包括基础语法、函数、数组、指针、结构体、文件操作等。对于想要提高C语言编程能力的学…

Nginx配置Https缺少SSL模块

1、Linux下Nginx配置https nginx下载和安装此处就忽略&#xff0c;可自行百度 1.1、配置https 打开nginx配置文件 vim /opt/app/nginx/conf/nginx.conf相关https配置 server {listen 443 ssl; #开放端口server_name echarts.net;#域名#redirect to https#ssl on; #旧版#ssl证…

C语言-嵌入式-STM32:FreeRTOS说明和详解

Free即免费的&#xff0c;RTOS的全称是Real time operating system&#xff0c;中文就是实时操作系统。 注意&#xff1a;RTOS不是指某一个确定的系统&#xff0c;而是指一类操作系统。比如&#xff1a;uc/OS&#xff0c;FreeRTOS&#xff0c;RTX&#xff0c;RT-Thread 等这些都…

linux装R

2020-021 Anaconda装R - 知乎 因为要装rpy2 发现是服务器端 自己的虚拟环境没有装R&#xff0c;具体安装过程 参考上面那个链接 最后还要配一下R的环境

应用监控(Prometheus + Grafana)

可用于应用监控的系统有很多&#xff0c;有的需要埋点(切面)、有的需要配置Agent(字节码增强)。现在使用另外一个监控系统 —— Grafana。 Grafana 监控面板 这套监控主要用到了 SpringBoot Actuator Prometheus Grafana 三个模块组合的起来使用的监控。非常轻量好扩展使用。…

pnpm:基础使用及详解

pnpm 是一个快速、高效的包管理器&#xff0c;用于安装、管理和构建 JavaScript 项目的依赖项。它的设计理念是减少重复的模块安装&#xff0c;节省磁盘空间&#xff0c;并提供更快的安装和运行速度。 基础使用&#xff1a; 安装 pnpm&#xff1a;在终端中运行以下命令安装 pn…

JDK-Mac系统和Windows系统安装及Java版本新特性(java9 - java19)

过去岁月不可追&#xff0c; 未来日子要珍惜。 莫愁身外七八事&#xff0c; 且尽眼前两三杯。 当你纠结于过去之时&#xff0c;懊恼与悔恨难免会让你陷入不欢。 当你忧愁于未来之时&#xff0c;未知与不安又会逐渐侵蚀你的心灵。 勿要纠结于过去&#xff0c;勿要忧愁于未来&…

使 Elasticsearch 和 Lucene 成为最佳向量数据库:速度提高 8 倍,效率提高 32 倍

作者&#xff1a;来自 Elastic Mayya Sharipova, Benjamin Trent, Jim Ferenczi Elasticsearch 和 Lucene 成绩单&#xff1a;值得注意的速度和效率投资 我们 Elastic 的使命是将 Apache Lucene 打造成最佳的向量数据库&#xff0c;并继续提升 Elasticsearch 作为搜索和 RAG&a…

排序算法1

文章目录 排序算法冒泡排序代码Python 插入排序代码Python 选择排序代码Python 小结 排序算法 这里先写几种排序算法 排序算法&#xff0c;经典的几种排序算法&#xff0c;就那么几个&#xff0c;如下&#xff1a; 冒泡排序插入排序选择排序归并排序快速排序 这一篇&#xf…

透视天气:数据可视化的新视角

数据可视化在天气方面能够为我们带来极大的帮助。天气是人类生活中一个重要的因素&#xff0c;对于农业、交通、航空、能源等各个领域都有着重要的影响。而数据可视化技术通过将复杂的天气数据转化为直观、易懂的图表、图像或地图等形式&#xff0c;为我们提供了更深入、更全面…

图像处理:时域、空域、频率的滤波介绍

首先要搞清楚为什么会呈现出不同域的维度&#xff0c;来理解和处理图像&#xff0c;原因是图像的构成有多个维度的信息特点。比如一段视频从时间顺序来看&#xff0c;相邻的2个图像帧绝大部分信息是相同的&#xff0c;这就构成了前向预测的理论基础&#xff1b;比如一帧图像从空…

HTTP 与 HTTPS

HTTP 浅谈 HTTP HTTPS 浅谈 HTTPS HTTP 与 HTTPS区别 HTTP&#xff08;Hypertext Transfer Protocol&#xff09;和HTTPS&#xff08;Hyper Text Transfer Protocol Secure&#xff09;在多个方面存在显著的区别&#xff0c;这些区别主要体现在以下几个方面&#xff1a; 特…

如何提升制造设备文件汇集的可靠性和安全性?

制造设备文件汇集通常指的是将与制造设备相关的各种文档和资料进行整理和归档的过程。这些文件可能包括但不限于&#xff1a; 生产数据&#xff1a;包括生产计划、订单信息、生产进度等。 设计文件&#xff1a;如CAD图纸、设计蓝图、产品模型等。 工艺参数&#xff1a;用于指…

腾讯实习后端c++一面-2024.4.29

你这两个项目觉得有什么比较难的地方吗&#xff1f;为什么会采用这样的技术栈&#xff1f;对是的。这个项目你在其中是做哪些部分&#xff1f;你可以说一下你在华为做的是一些什么。我应该问的是常用的。你说一下虚函数它是怎么实现的&#xff1f;你了解c11的一些特性吗&#x…

PaddlePaddle与OpenMMLab

产品全景_飞桨产品-飞桨PaddlePaddle OpenMMLab算法应用平台

ElasticSearch常用操作API

基础操作 以下均为[GET]操作 查看ElasticSearch全部索引 http://{ip}:9200/_cat/indices?v 查看ElasticSearch集群节点 http://{ip}:9200/_cat/nodes?v 查看ElasticSearch版本信息 http://{ip}:9200/ 查看ElasticSearch集群状态 http://{ip}:9200/_cluster/health?pretty …