当前位置: 首页 > article >正文

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,这个可以按需添加。

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


http://www.kler.cn/a/585253.html

相关文章:

  • QKV矩阵:优维大模型自注意力机制的数学之美
  • TCP 采用三次握手建立连接的原因
  • 30天学习Java第六天——Object类
  • C++ const 使用
  • Android源码学习之Overlay
  • 实现手机手势签字功能
  • 在线教育网站项目第四步 :学习Vue3 + Nuxt3+springcloud,服务器为ubuntu24.04
  • 日志Python安全之SSTI——Flask/Jinja2
  • go中实现子模块调用main包中函数的方法
  • 外星人入侵-Python-二
  • 12 DHCP的内容和HTTP的改良
  • 车载以太网测试-11【网络层-ICMP协议】
  • 02-Canvas-fabric.BaseBrush绘图工具
  • 通信协议传输过程中的序列化和反序列化机制
  • 2025-03-14 学习记录--C/C++-PTA 习题2-1 求整数均值
  • AI时代下的心理咨询师新利器:心理咨询小程序
  • 蓝桥杯十天冲刺(C++)-输入输出
  • 使用ZYNQ芯片和LVGL框架实现用户高刷新UI设计系列教程(第三讲)
  • 苍穹外卖实战附源码-DAY1
  • 优选算法的匠心之艺:二分查找专题(一)