在win服务器部署vue+springboot + Maven前端后端流程详解，含ip端口讲解

代码打包与基本配置

首先配置一台win系统服务器，开放你前端和后端运行的端口，如80和8080

前端打包

前端使用vue3，在打包前修改项目配置文件，我使用的是vite所以是vite.config.js。

import { defineConfig } from \'vite\'import vue from \'@vitejs/plugin-vue\'// https://vite.dev/config/export default defineConfig({ plugins: [vue()], server: { // 开发环境不配置代理，使用axios的baseURL统一管理API地址 proxy: {}, // 支持Vue Router的history模式 historyApiFallback: true, }, // 生产环境配置 build: { outDir: \'dist\', assetsDir: \'assets\', // 确保生产环境使用正确的API地址 rollupOptions: { output: { manualChunks: { vendor: [\'vue\', \'vue-router\', \'pinia\'], }, }, }, }, // 环境变量配置 define: { __VUE_PROD_DEVTOOLS__: false, },})

对于前端项目到此已经可以打包了，具体的api在nginx代理配置中指定。在项目目录使用

npm build

即可打包你的项目，这会生成一个dist目录，我们后续需将里面的内容复制到nginx里。

后端打包

对于后端我们需要修改两个文件，一是项目配置文件application.yml，二是cors跨域请求配置类。
首先在application.yml中指定数据库链接信息和Redis配置信息(如使用)，这里我们使用的是单服务器数据库，若有多服务器需求还请另行学习:

spring: application: name: hbuyb-web-console servlet: multipart: max-file-size: 2048MB max-request-size: 2048MB # 数据库连接信息 datasource: url: jdbc:mysql://你的数据库ip/使用的数据库名?allowMultiQueries=true username: 用户名 password: 密码 # Redis配置 data: redis: host: localhost port: 6379 database: 0 timeout: 5000 # 链接超时时间

若考虑到安全问题，可将用户名密码等使用本地文件存储或环境变量。
注意后端服务端口要和前端api请求端口一致
后端:

# 服务器信息server: # 端口 port: 8080

前端:

稍后修改nginx.conf配置，指定为 xxxxxxx:8080

然后是跨域请求配置，需要你新建一个类在项目配置目录下(只要是和启动类同级以下能被扫描到都行)

package com.hbuyb.config;import org.springframework.context.annotation.Configuration;import org.springframework.web.servlet.config.annotation.CorsRegistry;import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;@Configurationpublic class CorsConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(\"/**\") .allowedOrigins(\"http://xxx.xx.xxx.xx\") // 允许的前端地址 .allowedMethods(\"GET\", \"POST\", \"PUT\", \"DELETE\", \"OPTIONS\") .allowCredentials(true); // 如果前端需要传递Cookie }}

跨域请求是如何产生的
同源策略：浏览器的安全策略，要求协议、域名、端口三者完全相同才算同源。

跨域产生条件：当前端页面与后端API的以下任意一项不同时会产生跨域：
协议不同（如 http vs https）
域名不同（如 localhost vs 127.0.0.1）
端口不同（如 8080 vs 3000）
对于复杂请求，浏览器会先发送 OPTIONS 请求检查是否允许跨域
这个请求包含以下头部信息：
Origin: 请求源地址
Access-Control-Request-Method: 实际请求的方法
Access-Control-Request-Headers: 实际请求包含的自定义头部
服务器响应预检请求
服务器通过 CorsConfig 中的配置处理 OPTIONS 请求
返回相应的 CORS 头部：

Access-Control-Allow-Origin: \"http://xxx.xx.xxx.xx\"Access-Control-Allow-Methods: \"GET, POST, PUT, DELETE, OPTIONS\"Access-Control-Allow-Credentials: \"true\"

浏览器收到允许跨域的响应后，才发送实际的业务请求，因此以上类会允许指定的前端服务器地址的请求。
配置好后，我们就可以在maven生命周期中启动package进行打包。
打包好后会在target目录中生成jar包

后续在服务器运行jar包即可。

部署

win系统有两大好处，图形化页面和方便的部署。

前端部署

前端使用nginx，前往官网下载:
https://nginx.org/en/download.html

下载的是一个zip压缩包，解压即用，建议大家在本地下载再传到服务器，对于服务器我们有一个很方便的链接方式是远程桌面功能，在远程桌面连接时设置好共享的远程启驱动器，就可以访问远程资源。
上传好压缩包后解压:

其中在html文件夹将前端打包的dist目录中的所有内容复制进去:

然后修改conf中的nginx.conf配置文件，以下是我使用的配置:

# Nginx 主配置文件# 此文件配置了Nginx服务器的主要参数和虚拟主机设置# 指定运行Nginx的用户，默认为nobody# 在生产环境中建议使用专门的nginx用户#user nobody;# 工作进程数量，通常设置为CPU核心数# 对于单核CPU，设置为1；多核CPU可以设置为auto或具体数字worker_processes 1;# 错误日志配置（已注释）# 可以设置不同的日志级别：debug, info, notice, warn, error, crit, alert, emerg#error_log logs/error.log;#error_log logs/error.log notice;#error_log logs/error.log info;# 进程ID文件路径（已注释）#pid logs/nginx.pid;# events模块：配置Nginx处理连接的方式events { # 每个工作进程的最大并发连接数 # 这个值影响服务器的并发处理能力 worker_connections 1024;}# http模块：配置HTTP服务器的主要参数http { # 包含MIME类型定义文件 # mime.types文件定义了各种文件扩展名对应的MIME类型 include mime.types; # 默认MIME类型，当无法确定文件类型时使用 default_type application/octet-stream; # 日志格式定义（已注释） # 定义了访问日志的格式，包含客户端IP、时间、请求信息等 #log_format main \'$remote_addr - $remote_user [$time_local] \"$request\" \' #  \'$status $body_bytes_sent \"$http_referer\" \' #  \'\"$http_user_agent\" \"$http_x_forwarded_for\"\'; # 访问日志配置（已注释） #access_log logs/access.log main; # 启用sendfile，提高文件传输效率 # 当文件大小超过指定值时，使用sendfile系统调用 sendfile on; # TCP_NOPUSH选项（已注释） # 启用后，数据包会被累积到一定大小后再发送 #tcp_nopush on; # 保持连接超时时间（已注释） #keepalive_timeout 0; # 保持连接超时时间，单位为秒 # 客户端在65秒内没有新的请求，连接将被关闭 keepalive_timeout 65; # Gzip压缩配置（已注释） #gzip on; # 虚拟主机配置块 server { # 监听端口，80为HTTP默认端口 listen 80; # 服务器名称，可以是域名或IP地址 # 这里配置为您的服务器IP地址 server_name xxx.xx.xxx.xx; # 网站根目录路径 # 指向包含index.html的目录，通常是Vue项目的dist文件夹 # 请根据实际情况修改路径 root C:/Users/Administrator/Desktop/nginx-1.28.0/html; # 默认首页文件 index index.html; # 处理Vue Router的history模式路由 # 这是解决Vue单页应用刷新404问题的关键配置 # try_files会按顺序尝试查找文件： # 1. 先查找请求的URI对应的文件 # 2. 再查找请求的URI对应的目录 # 3. 最后回退到index.html（让Vue Router处理路由） location / { try_files $uri $uri/ /index.html; } # 静态资源缓存配置 # 匹配所有静态资源文件（JS、CSS、图片、字体等） # 设置长期缓存以提高加载速度 location ~* \\.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ { # 缓存1年 expires 1y; # 设置缓存控制头，public表示可被所有用户缓存 add_header Cache-Control \"public, immutable\"; # 允许跨域访问 add_header Access-Control-Allow-Origin *; } # HTML文件缓存配置 # HTML文件不缓存，确保用户能获取到最新版本 location ~* \\.html$ { # 不缓存 expires -1; # 强制不缓存 add_header Cache-Control \"no-cache, no-store, must-revalidate\"; # HTTP/1.0兼容的不缓存头 add_header Pragma \"no-cache\"; } # API代理配置 # 将/api/开头的请求代理到后端服务器 location /api/ { # 代理到后端服务器，移除/api前缀 proxy_pass http://xxx.xx.xxx.xx:8080/; # 设置代理请求头 proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; # 处理跨域资源共享(CORS) add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Methods \"GET, POST, PUT, DELETE, OPTIONS\"; add_header Access-Control-Allow-Headers \"DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization\"; # 处理OPTIONS预检请求 # 浏览器在发送复杂请求前会先发送OPTIONS请求 if ($request_method = \'OPTIONS\') { add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Methods \"GET, POST, PUT, DELETE, OPTIONS\"; add_header Access-Control-Allow-Headers \"DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization\"; # 预检结果缓存时间（20天） add_header Access-Control-Max-Age 1728000; add_header Content-Type \"text/plain; charset=utf-8\"; add_header Content-Length 0; # 返回204状态码（无内容） return 204; } } # 安全响应头设置 # 防止点击劫持攻击 add_header X-Frame-Options \"SAMEORIGIN\" always; # 防止MIME类型嗅探攻击 add_header X-Content-Type-Options \"nosniff\" always; # 启用XSS保护 add_header X-XSS-Protection \"1; mode=block\" always; # 控制Referrer信息泄露 add_header Referrer-Policy \"strict-origin-when-cross-origin\" always; # 隐藏Nginx版本信息，提高安全性 server_tokens off; # 限制客户端请求体大小，防止大文件上传攻击 client_max_body_size 10M; # Gzip压缩配置 # 启用Gzip压缩以减少传输数据量 gzip on; # 添加Vary头，告诉浏览器响应可能因Accept-Encoding而异 gzip_vary on; # 最小压缩文件大小，小于此值的文件不压缩 gzip_min_length 1024; # 对代理请求启用压缩 gzip_proxied any; # 压缩级别，1-9，级别越高压缩率越高但CPU消耗也越大 gzip_comp_level 6; # 指定需要压缩的MIME类型 gzip_types text/plain text/css text/xml text/javascript application/json application/javascript application/xml+rss application/atom+xml image/svg+xml; # 错误页面配置 # 404错误重定向到首页，让Vue Router处理 error_page 404 /index.html; # 5xx错误显示默认错误页面 error_page 500 502 503 504 /50x.html; # 禁止访问隐藏文件 # 防止访问以点开头的隐藏文件（如.git、.htaccess等） location ~ /\\. { deny all; access_log off; log_not_found off; } # 禁止访问备份文件 # 防止访问以~结尾的备份文件 location ~ ~$ { deny all; access_log off; log_not_found off; } }}

以上我们修改了代理配置和nginx服务器ip地址，前端请求 /api/users 会被代理到 http://xxx.xx.xxx.xx:8080/users，和后端端口相同。

双击nginx.exe即可启动服务器，在任务管理器可找到服务

这样你的前端就跑起来了，若你有域名和证书等，还请另行配置。

后端部署

安装java，和你本地开发环境版本相同并注册到环境变量，具体请参考其他文章。
上传jar包到服务器，使用

java -jar 你的jar包

来运行

end