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使用相对路径

相关推荐
开源必胜3 小时前
Socket、异步非阻塞 I/O 与 NGINX、Netty 模型
网络·tcp/ip·nginx
CHB1 天前
别再问uni-app x蒸汽模式是否成熟了,已经有大量App案例上架应用商店了
uni-app
Jack N1 天前
【Strapi 系列之八】二次开发 + 生产部署,Docker + PostgreSQL + Nginx 一把梭
nginx·docker·postgresql·strapi
闲云自留地2 天前
K8s Ingress 全解:ingress-nginx 部署、域名路径路由、HTTPS 限流灰度一篇通
nginx·https·kubernetes
幽默小吴2 天前
nginx篇
运维·nginx
正经教主2 天前
【FDE系列】阶段2:Day 45(up详细版):综合实战 — Docker + Nginx + Git 完整部署与本周收官
人工智能·git·nginx·docker·fde
甜到心里的蛋糕2 天前
AI 生成 MV 音频异响排查:频谱定位、片段替换与 Nginx 缓存
人工智能·python·nginx·ffmpeg·音视频·音频处理
行思理3 天前
Nginx 跨站请求(CORS)配置完全指南:从原理到生产实践
java·前端·nginx
anyup3 天前
uView Pro X 1.0.0 发布:全面支持 uni-app x 蒸汽模式,80+ 组件
前端·uni-app·ai编程
zhongben123_3 天前
从零开发一个打车APP:技术选型、系统架构与成本评估指南
大数据·运维·ios·系统架构·uni-app·web app