uniapp开发,打包成H5部署到服务器

本文详细介绍了使用uniapp完成前端项目开发后,如何打包生成H5静态文件,并进行服务器部署。关键步骤包括修改config.js中的请求地址,配置manifest.json,发行编译,使用SecureCRT连接服务器,解压h5.tar文件,最后通过服务器地址访问已部署的页面。
摘要由CSDN通过智能技术生成

前端使用uniapp开发项目完成后,需要将页面打包,生成H5的静态文件,部署在服务器上。
这样通过服务器链接地址,直接可以在手机上点开来访问。

打包全步骤如下:
1、修改config.js内的请求地址
需要后台部署到测试服务器上,给到前端一个访问地址
在这里插入图片描述
2、打开mainfest.json ,如果用到地图,需配置地图的key
在这里插入图片描述
3、选择项目–发行–PC/web/h5
在这里插入图片描述
填入网站标题–点击发行
在这里插入图片描述
编译成功后,会出现对应的文件路径,如图所示,点击打开,
在这里插入图片描述
点开后,会看到已经编译好的静态文件,全选–添加到压缩包–压缩格式选择.tar
在这里插入图片描述压缩完后会得到一个h5.tar压缩包
在这里插入图片描述
如果是后台负责部署,只需将h5.tar发给后台程序员部署即可。
如果需要前端人员自己部署到服务器,请看以下步骤:
1、先拿到服务器的地址信息,双击打开 SecureCRT,连接上该项目的服务器(连接服务器的教程请在我的其他文章内查找
点击如下图所示
在这里插入图片描述

2、进入到服务器的根目录底下。
在这里插入图片描述
3、
如果不打h5.tar压缩包,直接将static和index.html直接粘贴到h5文件夹内即可
如果是h5.tar压缩包,将h5.tar文件夹复制粘贴到h5文件夹内,然后在SecureCRT内,进到当前H5文件夹的目录,例如:
cd /demo/myproject/h5 ,在当前目录输入(解压缩)命令:tar -xvf h5.tar,然后回车

OK,这个时候就已经部署成功了。
4、打开浏览器,输入服务器访问地址,访问即可

UniApp是一个跨平台的应用开发框架,可以同时开发微信小程序、H5、安卓App和苹果App。 对于H5打包过程,你可以通过以下步骤进行操作: 1. 打开HBuilderX,然后打开你的UniApp项目。 2. 在HBuilderX中,点击"发行",然后选择"网站"。 3. 在弹出的选项中,选择"PC Web"或"手机H5",这取决于你想要打包的平台。 4. 然后,你会看到右侧出现了一个新建会话的窗口,表示连接到服务器了。左侧是电脑本地的文件,右侧是服务器的文件。 5. 在左侧导航栏中,进入到你打包好的文件路径unpackage/dist/build/h5。 6. 将static文件夹和index.html复制到右侧服务器部署的文件夹中,确保服务器中的文件夹与本地文件夹对应。你可以在服务器的桌面上新建一个文件夹,并将其命名为mayi,作为部署文件夹。 这样,你的UniApp H5应用就打包部署服务器上了。你可以通过访问服务器的URL来访问你的应用。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [uni-app项目打包H5部署服务器(超详细步骤)](https://blog.csdn.net/qq_36926234/article/details/120291442)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* [Java微信小程序B2C商城 H5+APP源码 前后端分离](https://download.csdn.net/download/m0_55416028/88263033)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值