vue项目可以打包的时候写死一个后端url地址,当然这不是很灵活的,多端部署就要多次打包,所以比一般都是打包没有写死域名的前端文件,然后服务器通过nginx等配置代理到指定的后端接口即可,比如下面是把manager开头的转发到 https://祝您赚大钱.com/manager/下面。
注意几个参数,毕竟鉴权还是要的,jwt可以看我另外的文章:nginx捕获服务器异常并通过location转发到备用服务器的解决方案和一般反向代理设置和JWT验证转发
下面是示例(丢到nginx的配置里面,记得重启一下nginx):
location ^~ /manager { proxy_pass https://祝您赚大钱.com/manager/; proxy_set_header Host daogou.server.wei1.top; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header REMOTE-HOST $remote_addr; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection $connection_upgrade; proxy_http_version 1.1; # proxy_hide_header Upgrade; add_header X-Cache $upstream_cache_status; #Set Nginx Cache set $static_filezdKZ2BXu 0; if ( $uri ~* "\.(gif|png|jpg|css|js|woff|woff2)$" ) { set $static_filezdKZ2BXu 1; expires 1m; } if ( $static_filezdKZ2BXu = 0 ) { add_header Cache-Control no-cache; } }
解释指令:
location ^~ /manager:这个指令表示当请求的 URI 以 /manager 开头时,将应用下面的配置块。
proxy_pass https://祝您赚大钱.com/manager/;:这个指令将匹配的请求转发到 https://祝您赚大钱.com/manager/。
proxy_set_header:这些指令用于设置反向代理请求的一些头部信息,包括 Host、X-Real-IP、X-Forwarded-For、REMOTE-HOST、Upgrade、Connection 等。
proxy_http_version 1.1;:这个指令设置反向代理使用 HTTP 1.1 版本。
add_header X-Cache $upstream_cache_status;:这个指令将响应头中添加 X-Cache 字段,用于显示反向代理的缓存状态。
缓存相关的设置:这些设置用于处理静态文件的缓存。对于图片、样式表、脚本等静态文件,将启用缓存,并设置缓存过期时间为 1 分钟。对于其他非静态文件,将设置响应头的 Cache-Control 为 no-cache,即不缓存。
请注意,这只是一个部分配置块,并未包含完整的 Nginx 配置。在实际部署中,您需要确保该配置块在正确的 server 块内,并且整个 Nginx 配置是正确的,没有其他语法错误。在配置生效后,所有请求以 /manager 开头的 URL 将会被代理到 https://祝您赚大钱.com/manager/ 目标服务器,并且根据配置中的缓存规则进行处理。