当前位置：首页 > news >正文

Nginx部署vue以及转发配置记录

news 2025/9/28 8:33:26

nginx配置

这是独立的server模块配置，需要在父配置nginx.conf加入这个配置文件。
在父配置nginx.conf文件的http模块内加入。
比如：include conf.d/vue-app.conf;

 server {listen       83;  # 使用不同端口避免冲突server_name  localhost;# 处理 /practice（仅路径本身）location = /practice {return 301 /practice/;}# 1. 配置前端 /practice/* 路径：指向打包后的静态资源，解决 history 模式刷新404location /practice/ {# 静态资源根路径：指向前端打包后的 practice 目录（关键！注意：需与实际路径一致，实际路径与vue项目打包配置相关）# 文件查找路径root C:/nginx/nginx-1.28.0/html/dist; + location /practice/root   C:/nginx/nginx-1.28.0/html/dist; # 访问 /practice/ 时默认加载 index.htmlindex  index.html index.htm;# 核心：history 模式刷新404解决方案——路径不存在时，重定向到 /practice/index.html（关键！注意：需与实际路径一致，实际路径与vue项目打包配置相关）try_files $uri $uri/ /practice/index.html;}# 2. 配置后端接口转发：/practice/api/* → 后端服务（与 vue.config.js proxy 一致），# /practice/api/是vue项目配置转发给后端的url前缀，实际后端项目是接收去掉/practice/api/之后的路径，比如/practice/api/getInfo，后端接收/getInfolocation /practice/api/ {# 转发目标：后端服务地址（需与 vue.config.js 中 baseUrl 一致）# Nginx 的转发逻辑是：将/practice/api/之后的路径部分，拼接到proxy_pass的目标地址后# 客户端请求 http://你的域名/practice/api/user/list# Nginx 会转发到 http://localhost:8080/user/listproxy_pass http://localhost:8080/;# 关键：确保后端能获取客户端真实信息（如 IP、Host）proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;}
}

需要配置两个location，一个用来获取静态资源，如js、css等；另一个转发请求到后端，解决跨域问题。

部署vue

 # 1. 配置前端 /practice/* 路径：指向打包后的静态资源，解决 history 模式刷新404location /practice/ {# 静态资源根路径：指向前端打包后的 practice 目录（关键！注意：需与实际路径一致，实际路径与vue项目打包配置相关）# 文件查找路径root C:/nginx/nginx-1.28.0/html/dist; + location /practice/root   C:/nginx/nginx-1.28.0/html/dist; # 访问 /practice/ 时默认加载 index.htmlindex  index.html index.htm;# 核心：history 模式刷新404解决方案——路径不存在时，重定向到 /practice/index.html（关键！注意：需与实际路径一致，实际路径与vue项目打包配置相关）try_files $uri $uri/ /practice/index.html;}

转发请求到后端，解决跨域问题

# 2. 配置后端接口转发：/practice/api/* → 后端服务（与 vue.config.js proxy 一致），# /practice/api/是vue项目配置转发给后端的url前缀，实际后端项目是接收去掉/practice/api/之后的路径，比如/practice/api/getInfo，后端接收/getInfolocation /practice/api/ {# 转发目标：后端服务地址（需与 vue.config.js 中 baseUrl 一致）# Nginx 的转发逻辑是：将/practice/api/之后的路径部分，拼接到proxy_pass的目标地址后# 客户端请求 http://你的域名/practice/api/user/list# Nginx 会转发到 http://localhost:8080/user/listproxy_pass http://localhost:8080/;# 关键：确保后端能获取客户端真实信息（如 IP、Host）proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;}

外部的nginx需要转发到上面的vue项目配置

server {listen 9080;server_name localhost;access_log logs/9080_access.log; # 确保日志能记录请求# 处理 /practice（仅路径本身）location = /practice {return 301 /practice/;}# 处理带斜杠的路径转发location /practice/ {# 直接代理到Vue的83端口（确保Vue此时能正常访问）proxy_pass http://localhost:83;# 强制传递正确的端口信息proxy_set_header Host localhost:9080;proxy_set_header X-Real-IP $remote_addr;}
}