SHO酱的Blog

SHO酱的Blog

将 uni-app 打包 H5 发布

2024-04-03
将 uni-app 打包 H5 发布

版本说明

HBuilder X 4.08

步骤

配置

填写应用名称,点击uni-app应用标识重新获取,其他信息根据实际情况填写。
uniapp_package_h5_01.png

路由模式选择hash运行的基础路径这里因为实际部署时Nginx是根据URL前缀来作为跳转条件的,所以这里必须要写,并与Nigix中的跳转条件相同。
uniapp_package_h5_02.png

发布

点击菜单发行->网站-PC Web或手机H5(仅适用于uni-app),在弹出的WEB发行窗口中填写实际的信息后发行
uniapp_package_h5_03.png
uniapp_package_h5_04.png

等待控制台完成读条,显示类似下面的内容,表示打包完成。

[HBuilder] 16:08:28.539 项目 client-supervise [__UNI__XXX] 开始打包
[HBuilder] 16:08:30.345 正在编译中...
[HBuilder] 16:09:01.157  INFO  Build optimizing...
[HBuilder] 16:09:01.172 项目 client-supervise 编译成功。
[HBuilder] 16:09:01.390 正在差量编译...
[HBuilder] 16:09:25.774 WARNING: asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
[HBuilder] 16:09:25.775 This can impact web performance.
[HBuilder] 16:09:25.776 Assets: 
[HBuilder] 16:09:25.776   static/js/pages-demo-crud2.61235747.js (249 KiB)
[HBuilder] 16:09:25.777   static/js/pages-manage-notice.6c328a19.js (249 KiB)
[HBuilder] 16:09:25.778   static/images/home/banner1.png (607 KiB)
[HBuilder] 16:09:25.779   static/images/home/banner3.png (2.85 MiB)
[HBuilder] 16:09:25.779 项目 client-supervise 编译成功。
[HBuilder] 16:09:25.981 项目 client-supervise 导出Web成功,路径为:D:\Programs\client-supervise\unpackage\dist\build\web
[HBuilder] 16:09:25.982 注意请部署到web服务器使用,不要使用资源管理器直接打开,除非进行相对路径配置,具体参考:https://ask.dcloud.net.cn/article/37432。

部署

将打好包的目录上传至服务器,打开Nginx的配置文件,在里面添加如下配置,并重新加载配置文件。

location /app/supervise/ {
    alias   /app/client-supervise/;
    try_files $uri $uri/ /index.html;
    index  index.html index.htm;
}
location /api/ {
    proxy_set_header Host $http_host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header REMOTE-HOST $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_pass http://localhost:30710/;
}