代码打包与基本配置
首先配置一台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;
@Configuration
public 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