uniapp 打包成h5部署到服务器的步骤记录_uniapp h5打包静态文件目录

uniapp 打包成h5

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

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

查找一番资料得知：

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

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

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

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

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

补充说明： 个人觉得这个地方的运行路径应该是/work/ ,实操时可以验证一下……

4：点击发行，控制台会自动编译

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

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

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

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

将static文件夹喝index.html复制进去

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

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

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

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

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