HBuilder发布H5，nginx部署

• 一、说明
• 二、步骤
• • 1、manifest.json 基础配置
  • 2、manifest.json h5配置
  • 3、发行
  • 4、发行完毕
  • 5、nginx.conf 配置

一、说明

• 此功能需要先登录！DCloud开发者中心，没有账号的话去注册一个。

二、步骤

1、manifest.json 基础配置

• uni-app应用标识(AppID)，不存在请点击 重新获取
  

2、manifest.json h5配置

• 配置 页面标题，运行的基础路径，端口 等
  

3、发行

• 依次选择：发行 -> 网站-PC Web或手机H5(仅适用于uni-app)[H]
  

4、发行完毕

• 控制台提示如下：

[HBuilder] 14:19:52.161 项目 'uni_demo'导出h5成功，路径为：F:/demoCode/uni_demo/unpackage/dist/build/h5
[HBuilder] 14:19:52.167 注意请部署到web服务器使用，不要使用资源管理器直接打开，除非进行相对路径配置，具体参考：。

• 导出的项目名为 h5，入口文件为 index.html
  

5、nginx.conf 配置

• nginx 配置文件正确性测试：nginx -t
• nginx 重启命令：systemctl restart nginx

server {listen       80;#server_name  localhost;server_name  uni.abc.com;location / {root   /var/www/uni_app/h5;index  index.html index.htm;}# location# root: 将接收到的资源根据/usr/local/nginx/html/dist文件夹去查找资源# index: 默认去上述路径中找到index.html或者index.htmerror_page   500 502 503 504  /50x.html;location = /50x.html {root   html;}
}

HBuilder发布H5，nginx部署

• 一、说明
• 二、步骤
• • 1、manifest.json 基础配置
  • 2、manifest.json h5配置
  • 3、发行
  • 4、发行完毕
  • 5、nginx.conf 配置

一、说明

• 此功能需要先登录！DCloud开发者中心，没有账号的话去注册一个。

二、步骤

1、manifest.json 基础配置

• uni-app应用标识(AppID)，不存在请点击 重新获取
  

2、manifest.json h5配置

• 配置 页面标题，运行的基础路径，端口 等
  

3、发行

• 依次选择：发行 -> 网站-PC Web或手机H5(仅适用于uni-app)[H]
  

4、发行完毕

• 控制台提示如下：

[HBuilder] 14:19:52.161 项目 'uni_demo'导出h5成功，路径为：F:/demoCode/uni_demo/unpackage/dist/build/h5
[HBuilder] 14:19:52.167 注意请部署到web服务器使用，不要使用资源管理器直接打开，除非进行相对路径配置，具体参考：。

• 导出的项目名为 h5，入口文件为 index.html
  

5、nginx.conf 配置

• nginx 配置文件正确性测试：nginx -t
• nginx 重启命令：systemctl restart nginx

server {listen       80;#server_name  localhost;server_name  uni.abc.com;location / {root   /var/www/uni_app/h5;index  index.html index.htm;}# location# root: 将接收到的资源根据/usr/local/nginx/html/dist文件夹去查找资源# index: 默认去上述路径中找到index.html或者index.htmerror_page   500 502 503 504  /50x.html;location = /50x.html {root   html;}
}