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

傷城~ 2021-07-25 19:17 1631阅读 0赞

## uniapp 打包成h5 ##

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

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

查找一番资料得知：

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

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

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center]

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 1]

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 2]  
**补充说明：** 个人觉得这个地方的运行路径应该是/work/ ,实操时可以验证一下……

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 3]  
打包好的h5文件是不能直接打开的。需要部署到服务器的规定路径上才可以。

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 4]  
**补充说明：** 打包后的文件格式如上图所示：static文件夹与Index.html文件。这两个是需要部署到服务器上的。

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 5]  
`将static文件夹喝index.html复制进去`

![在这里插入图片描述][20201124170701650.png_pic_center]

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

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

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

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 6]

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20201124170215541.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA=,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 1]: https://img-blog.csdnimg.cn/20201124170258793.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA=,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 2]: https://img-blog.csdnimg.cn/20201124170325716.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA=,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 3]: https://img-blog.csdnimg.cn/20201124170439801.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA=,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 4]: https://img-blog.csdnimg.cn/20201124170534896.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA=,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 5]: https://img-blog.csdnimg.cn/20201124170639457.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA=,size_16,color_FFFFFF,t_70#pic_center
[20201124170701650.png_pic_center]: https://img-blog.csdnimg.cn/20201124170701650.png#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 6]: https://img-blog.csdnimg.cn/20201124170842247.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA=,size_16,color_FFFFFF,t_70#pic_center
[uniapp _h5_ https_www.jianshu.com_p_dee3043bc994]: https://www.jianshu.com/p/dee3043bc994