【uni-app学习二】H5端打包及发布至nginx

一、h5打包

点击hbuildx 菜单栏的“发行”-“网站-H5手机版（仅适用于uni-app）”

弹出对话框中，填写“网站标题” 及“网站域名”，这里因为是本测试域名填写“127.0.0.1”

下面还有一个选项，是直接将打包后的文件发布到dcloud的云端服务器，具体可以点击超链接，查看具体官方文档

这里我们部署到本地，然后点击“发行”，系统开始编译，在控制台可以看到具体进度，打包完成后会输出编译后的文件所在目录

二、发布至nginx 服务器

将打包后输出的整个文件夹拷贝至nginx 中的html目录，或者不做移动，在nginx 中配置目录

修改nginx.conf 配置文件

server { 

listen 80; 

server_name localhost; 

location / {

 root html/app-plus; 

index index.html index.htm; 

}  

重启nginx后访问

添加一级访问目录：

很多情况下，我们的访问地址是通过一级目录访问的，如http://127.0.0.1/xxxx/，这里的xxxx怎么添加上去呢？

在工具中点击文件“manifest.json”，右侧会出现一个设计页面，选择“h5配置”

这里我们添加一层“h5” 路径，然后点击菜单栏的“发行”-“网站-H5手机版（仅适用于uni-app）”重新打包，完成后会编译生成一个"h5‘’文件夹

将整个h5文件夹拷贝至nginx

然后修改nginx 配置

重启nginx

这个时候访问http://127.0.0.1/h5