萌新都能学会的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、最后等待云打包完成就好了。

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

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

相关推荐
夏天要喝冰可乐1 分钟前
Codex 写 Three.js 大屏实录:800 行代码,和一条画反的弧线
前端·aigc
欣欣之王来了14 分钟前
v-bind语法糖::属性名的简写方式
前端·学习·架构·项目·vue3教程
2601_9540056231 分钟前
# ricon SVG 编辑器:工业图元的“军火工厂“
前端·物联网·数学建模·架构·编辑器·制造
codeniu33 分钟前
一个人,5天,从想法到上线:我用 TRAE 跑通全链路开发的完整实录
前端
shaibdoio36 分钟前
RPA自动化获客怎么落地?瞬维AI评论区工程实践
前端·自动化·rpa·长沙瞬维ai
计算机魔术师40 分钟前
807亿亏配900%留存:ANT招股书把AI的拧巴摊在桌上了
前端
未来之窗软件服务1 小时前
web网络请求竞态问题与取消方案-东方仙盟
前端·状态模式·仙盟创梦ide·东方仙盟·网络取消
wshzd1 小时前
LLM之Agent(120)|DeepSeek-Harness(二十七)Workflow 引擎与 Ralph 循环
前端·数据库·人工智能
涛涛ing1 小时前
React Compiler 1.0 之后,状态管理库正在被重新定义
前端
乘风gg1 小时前
出事了,AI 提效后,老板让我裁员20%
前端·后端·ai编程