uni-app打包h5并部署到nginx,路由模式history

uni-app打包有些坑,当时运行的基础路径填写了./,导致在二级页面刷新之后,页面直接空白。就只能换一个路径了,nginx也要跟着改,下面是具体步骤。

manifest.json配置web

运行路径写/h5/,或者写你们网站的目录,比如我这里写了h5,到时候访问的地址就是127.0.0.1/h5,对,带了一个h5

nginx配置

需要在nginx里面配置一个/h5配置,然后我这里还配置了一个location /的,让他重定向到/h5,这样用户输入127.0.0.1的时候会重定向127.0.0.1/h5,这个可以按需添加。

txt 复制代码
server {
        listen 80;
        server_name localhost;

        # 重定向根路径 / 到 /h5
        location / {
            return 301 /h5;
        }
		
		# 访问/h5的配置
        location /h5 {
            root html/webH5;
            index index.html index.htm;
            try_files $uri $uri/ /h5/index.html;
        }
		
		# 访问后台接口的配置
        location /web/server/ {
            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:8080/web/server/;
        }

        error_page 500 502 503 504 /50x.html;
        location = /50x.html {
            root html;
        }
    }

打包成网站

把打包之后的文件,丢到nginx里面的\html\webH5\h5目录下面,如果你的文件不是放到这个地方的,那就改一下nginx的root html/webH5;配置,改成你自己的目录

打包之后请求后台地址想用相对地址的话,可以参考uni-app打包成H5使用相对路径

相关推荐
JAVA面经实录91713 小时前
Java高级后端 · 全套面试通关手册(Nginx)
java·nginx·面试
今年下半年14 小时前
【微信小程序】uni-app + Vue3 + Vite 的小程序项目实现「进入指定范围才能打卡」的考勤功能
微信小程序·uni-app·定位·考勤
lpfasd1232 天前
WinSW在Win7上失败真相-实测与修复
windows·nginx
lpfasd1232 天前
nginx服务化五套方案原理解剖与选型
运维·nginx
ue星空3 天前
ALS V4 中文拆解手册
运维·nginx
吴声子夜歌3 天前
Nginx应用与运维——Nginx集群负载与配置管理(二)
运维·nginx
cpolar技术支持3 天前
外网测试机的异常传不回内网?自托管 Sentry,用 cpolar 打通错误上报链路
python·nginx·docker·cpolar·sentry
吴声子夜歌4 天前
Nginx应用与运维——Nginx在Kubernetes中的应用(一)
运维·nginx·kubernetes
螺蛳粉 螺蛳粉4 天前
第一篇:Keepalived 高可用实战:VIP 漂移与 Nginx 主备切换完整指南
运维·nginx·负载均衡·keepalived·高可用
吴声子夜歌4 天前
Nginx应用与运维——Nginx在Kubernetes中的应用(三)
运维·nginx·kubernetes