uniapp 打包成h5部署到服务器的步骤记录

时间:2024-05-19 11:39:35

uniapp 打包成h5

最近公司有个项目是针对各种小商小贩的,类似于微店,给每家每户开个店。

由于之前都是用uniapp开发app 与小程序,话说我使用Uniapp也就4个多月的时间,并不具有很扎实的基础……
所以当被问到是否可以用uniapp打包成h5时,有点懵……

查找一番资料得知:

Uniapp打包成h5与打包成app基本没啥区别,之前的开发步骤都是一样的。唯一的区别就是打包的过程而已……

下面记录一下打包步骤,此步骤是借鉴的大神的,并非本人实际操作,如果实操过程中发现其他的问题,后面会及时更新此文档。

1:点击菜单栏发行,点击选择网站-H5手机版

uniapp 打包成h5部署到服务器的步骤记录

2:在网站域名这一栏填写,网站域名,例如www.xxx.com或者你的服务器的IP地址47.103.XX.XX,(这个地址是你将项目打包之后存放放静态文件的地址)

uniapp 打包成h5部署到服务器的步骤记录

3:点击高级按钮,进入到manifest.json的h5配置里面,根据自己的情况配置一些信息,我这里是默认的。

uniapp 打包成h5部署到服务器的步骤记录
补充说明: 个人觉得这个地方的运行路径应该是/work/ ,实操时可以验证一下……

4:点击发行,控制台会自动编译

uniapp 打包成h5部署到服务器的步骤记录
打包好的h5文件是不能直接打开的。需要部署到服务器的规定路径上才可以。

5:编译通过,生成静态的h5文件,我们需要将这个h5的文件,部署到我们前面填写的域名(或者服务器的ip)的根目录底下。

uniapp 打包成h5部署到服务器的步骤记录
补充说明: 打包后的文件格式如上图所示:static文件夹与Index.html文件。这两个是需要部署到服务器上的。

6:找一个工具,连接自己的服务器,进入到自己的服务器的根目录底下。

uniapp 打包成h5部署到服务器的步骤记录
将static文件夹喝index.html复制进去

uniapp 打包成h5部署到服务器的步骤记录

7:打开浏览器,输入服务器ip地址,访问一下index.html的内容

例如: http://47.10x.xx.78:8091/work/index.html#/
主机ip和端口号也要注意

8:注意,这三个地方的路径名称一定要一致哦。

1:打包时候的配置的运行的基础路径
2:服务器根目录底下存放静态文件static和index.html
3:浏览器里面访问的路径

uniapp 打包成h5部署到服务器的步骤记录

以上内容借鉴自 uniapp 打包成h5部署到服务器步骤记录 https://www.jianshu.com/p/dee3043bc994