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了,至此本文结束,本文皆是白话文,纯纯傻瓜式教程,喜欢的点个赞,不喜欢的也勿喷,有问题直接留言或者私信即可。

相关推荐
哆啦A梦15889 小时前
20, Springboot3+vue3实现前台轮播图和详情页的设计
javascript·数据库·spring boot·mybatis·vue3
gogoing9 小时前
ESLint 配置字段说明
前端·javascript
Lkstar9 小时前
面试官让我手写 Promise.all / Promise.race / Promise.allSettled,我直接水灵灵地写出来了
javascript·面试
gogoing9 小时前
webpack 的性能优化
前端·javascript
gogoing9 小时前
Node.js 模块查找策略(require 完整流程)
javascript·node.js
gogoing9 小时前
await fetch() 的两阶段设计
前端·javascript
gogoing9 小时前
前端首屏加载优化
前端·javascript
gogoing9 小时前
重排与重绘
前端·javascript
徐小夕10 小时前
100小时,我做了一款AI CAD建模软件,开源!
前端·vue.js·github
之歆11 小时前
DAY_18深度解析:数据类型转换与运算符全攻略(上)
前端·javascript