萌新都能学会的vue打包app 之路

概括

去年换的公司,主要是写官网,是适配pc和手机版,并且要打包成app。之前虽然有过uni-app的开发经验,但是现在是用vue开发打包app,也只能上网上查攻略。后面再掘金看到jym说用web-view标签,然后去试了一下,确实很简单。但是后面老板说要上谷歌,这种热更新的过不了审核。所以只能用另一种方式打包。以下介绍两种vue打包成app的方法。

第一种web-view套壳打包

1、用HBuider创建一个uniapp的项目,最基础的就行

2、把page下面的index页面加入web-view标签,并且删除多余代码。src链接到部署的网站上面

3、在配置文件中的app-plus下面加入"fullscreen":true,设置全屏

4、在pages.json里面修改自定义导航栏。pages下面设置"navigationBarTitleText":"",在globalStyle下面设置"navigationStyle":"custom"

5、选择当前项目,点 发行->原生-APP云打包。里面的证书这些自己配置,我这边测试用的是公测证书。

6、排队等待打包完成,安装到手机就好了

第二种5+APP打包

1、配置请求路径,http或者https (不能使用反向代理),修改router路由模式为hash,vue.config.js下的publicPath修改为'./'。包括其他地方用到以'/'开头引入的资源。都要修改成'./',不然打包出来页面报错,导致一片空白。 修改完后打包成dist

2、使用HBuider创建一个5+APP的项目,把打包好的dist里面的除manifest.json以外的全部资源,放入创建好的项目里面,替换掉

3、替换完后打包。如果提示你开启了通讯录权限需要完善信息,可以根据提示去取消的获取通讯录权限,或者去实名认证

4、最后等待云打包完成就好了。

以上都只进行了简单的打包流程,详细配置需要自己去根据需求配置

这是本人第一次写文章,主要是记录下踩坑经历,也希望能帮助到需要的人。有什么指导和建议也欢迎交流

相关推荐
zhanghaisong_20159 分钟前
Caused by: org.attoparser.ParseException:
前端·javascript·html·thymeleaf
Eric_见嘉12 分钟前
真的能无限试(白)用(嫖)cursor 吗?
前端·visual studio code
DK七七42 分钟前
多端校园圈子论坛小程序,多个学校同时代理,校园小程序分展示后台管理源码
开发语言·前端·微信小程序·小程序·php
老赵的博客1 小时前
QSS 设置bug
前端·bug·音视频
Chikaoya1 小时前
项目中用户数据获取遇到bug
前端·typescript·vue·bug
南城夏季1 小时前
蓝领招聘二期笔记
前端·javascript·笔记
Huazie1 小时前
来花个几分钟,轻松掌握 Hexo Diversity 主题配置内容
前端·javascript·hexo
NoloveisGod1 小时前
Vue的基础使用
前端·javascript·vue.js
GISer_Jing1 小时前
前端系统设计面试题(二)Javascript\Vue
前端·javascript·vue.js
海上彼尚2 小时前
实现3D热力图
前端·javascript·3d