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

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

ops 2025/9/1 6:52:29

代码打包与基本配置

首先配置一台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-consoleservlet:multipart:max-file-size: 2048MBmax-request-size: 2048MB# 数据库连接信息datasource:url: jdbc:mysql://你的数据库ip/使用的数据库名?allowMultiQueries=trueusername: 用户名password: 密码# Redis配置data:redis:host: localhostport: 6379database: 0timeout: 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;@Configuration
public class CorsConfig implements WebMvcConfigurer {@Overridepublic 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_typestext/plaintext/csstext/xmltext/javascriptapplication/jsonapplication/javascriptapplication/xml+rssapplication/atom+xmlimage/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;}}
}