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

nginx配置

这是独立的server模块配置，需要在父配置nginx.conf加入这个配置文件。

在父配置nginx.conf文件的http模块内加入。

比如：include conf.d/vue-app.conf;

java 复制代码

 server {
    listen       83;  # 使用不同端口避免冲突
    server_name  localhost;

	# 处理 /practice（仅路径本身）
	location = /practice {
		return 301 /practice/;
	}
	
    # 1. 配置前端 /practice/* 路径：指向打包后的静态资源，解决 history 模式刷新404
	location /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.html
		index  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，后端接收/getInfo
	
	location /practice/api/ {
	
		# 转发目标：后端服务地址（需与 vue.config.js 中 baseUrl 一致）
		# Nginx 的转发逻辑是：将/practice/api/之后的路径部分，拼接到proxy_pass的目标地址后
		# 客户端请求 http://你的域名/practice/api/user/list
		# Nginx 会转发到 http://localhost:8080/user/list
		
		proxy_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

java 复制代码

 # 1. 配置前端 /practice/* 路径：指向打包后的静态资源，解决 history 模式刷新404
	location /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.html
		index  index.html index.htm;
		
		# 核心：history 模式刷新404解决方案------路径不存在时，重定向到 /practice/index.html（关键！注意：需与实际路径一致，实际路径与vue项目打包配置相关）
		try_files $uri $uri/ /practice/index.html;
	}

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

java 复制代码

# 2. 配置后端接口转发：/practice/api/* → 后端服务（与 vue.config.js proxy 一致），
	# /practice/api/是vue项目配置转发给后端的url前缀，实际后端项目是接收去掉/practice/api/之后的路径，比如/practice/api/getInfo，后端接收/getInfo
	
	location /practice/api/ {
	
		# 转发目标：后端服务地址（需与 vue.config.js 中 baseUrl 一致）
		# Nginx 的转发逻辑是：将/practice/api/之后的路径部分，拼接到proxy_pass的目标地址后
		# 客户端请求 http://你的域名/practice/api/user/list
		# Nginx 会转发到 http://localhost:8080/user/list
		
		proxy_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项目配置

java 复制代码

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;
    }
}

问题记录

windows使用nginx重新加载命令不生效
使用nginx.exe -s reload配置不生效
需要先kill掉进程，再启动。
kill的命令：
taskkill /f /im nginx.exe
启动命令（进到nginx安装目录，cmd）:
start nginx.exe