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

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

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

相关推荐
Predestination王瀞潞17 小时前
5.4.3 通信->WWW万维网内容访问标准(W3C):WWW(World Wide Web) 协议架构(分层)
前端·网络·网络协议·架构·www
爱学习的程序媛17 小时前
【Web前端】优化Core Web Vitals提升用户体验
前端·ui·web·ux·用户体验
zabr17 小时前
花了 100+ 篇笔记,我整理出 了一套 AI Agent 工程完全指南
前端·后端·agent
软弹17 小时前
深入理解 React Ref 机制:useRef 与 forwardRef 的协作原理
前端·javascript·react.js
YaHuiLiang17 小时前
Ai Coding浪潮下的前端:“AI在左,裁员在右”
前端
雪碧聊技术18 小时前
前端vue代码架子搭建
前端·javascript·vue.js·前端项目代码框架搭建
爱学习的程序媛18 小时前
【Web前端】前端用户体验优化全攻略
前端·ui·交互·web·ux·用户体验
han_18 小时前
JavaScript设计模式(二):策略模式实现与应用
前端·javascript·设计模式
x***r15118 小时前
Notepad++ 8.6 安装教程:详细步骤+自定义安装路径(附注意事项)
linux·前端·javascript
Hilaku18 小时前
为什么很多工作 5 年的前端,身价反而卡住了?🤷‍♂️
前端·javascript·面试