后端的设置

为了明确区分前后端的请求和响应，在Java后端加上了统一的前缀/api如下：

server.servlet.context-path=/api
server.port=6290
server.address=127.0.0.1

这里要注意

1 前端也要进行相应的修改，axios的baseurl也要设置成/api

2 绑定了本地回环地址。在生产环境的时候使用，在本地开发的时候，会导致前端无法直接访问。

在开发过程中不能如此配置

前端的设置

前端也要设置/api前缀，但生产环境和开发环境有所不同，详见后述。

部署在服务器上

后端的部署

后端因为打包成了jar文件，只要把jar文件放到指定的目录上，然后写个服务就可以：

[Unit]
Description=Vegalion Java Backend Service
After=network.target

[Service]
Type=simple

User=root 
WorkingDirectory=/opt/vegalion

ExecStart=/usr/bin/java -jar /opt/vegalion/vegalion.jar
Restart=on-failure
RestartSec=10

# 日志输出设置
StandardOutput=syslog
StandardError=syslog
SyslogIdentifier=vegalion-backend

[Install]
WantedBy=multi-user.target

这里为了简单，直接使用了root用户。需要先安装好java 25，然后直接运行就可以启动了。把这个配置成开机就启动的服务就可以了。

前端的部署

前端的部署要使用nginx来提供前端的所有静态文件，放到指定的目录中。然后写一个nginx的配置文件如下：

server {
    listen 80;
    server_name localhost; # 👈 替换为你的服务器公网 IP 或域名，本地测试也可以写 localhost

    # ==========================================
    # 1. 前端静态资源托管
    # ==========================================
    location / {
        root /var/www/altalion;            # 前端项目打包后的 dist 目录绝对路径
        index index.html index.htm;
        
        # 针对 Vue/React 等单页应用 (SPA) 的路由模式（History 模式）的关键配置
        # 防止页面刷新时出现 Nginx 的 404 错误
        try_files $uri $uri/ /index.html; 
    }

    # ==========================================
    # 2. 后端接口反向代理
    # ==========================================
    # 只要浏览器请求的路径是以 /api/ 开头的，就会进入这个块
    location /api/ {
        # 转发给本地运行的 Java 后端（6290 端口）
        # 📢 注意：因为你的后端也需要 /api，所以 6290 后面【绝对不要加斜杠/】
        proxy_pass http://127.0.0.1:6290; 
        
        # 传递必要的请求头给后端，方便 Java 获取客户端的真实 IP 和域名
        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;

        # 调整后端响应的超时时间（可选，防止一些长耗时接口超时中断）
        proxy_connect_timeout 60s;
        proxy_read_timeout 60s;
        proxy_send_timeout 60s;
    }
}

前端我放在/var/www/altalion，前边配置就是所有路由都要走到index去。

然后因为分离了所有后端的请求都是从/api/走，所以让nginx将后端请求转发给java后端即可。

生产环境和开发环境的不同

最后再列一下生产环境和开发环境的不同。

后端开发环境 - 不指定绑定ip地址

server.servlet.context-path=/api
server.port=6290
#server.address=127.0.0.1

后端生产环境 - 固定绑定本地回环地址，外部无法访问

server.servlet.context-path=/api
server.port=6290
server.address=127.0.0.1

前端开发环境 - 绑定IP和端口

# 开发用
VITE_MAIN_URL="http://localhost:6290/api

前端生产环境 - 不绑定IP和端口，仅仅只指定相对路径

# 生产环境用
VITE_MAIN_URL="/api"

Mantis模板的拆解

现在有AI辅助还是很方便的，把Mantis侧边栏重新修改成了可以支持嵌套多列菜单，固定260px宽的内容，然后改成了完全隐藏。虽然整体上看着丑一点，但目前足够用了，接下来就可以愉快的写业务了。

记录一下前后端分离项目的部署

前端项目名称叫Altalion，后端是Vegalion，他们的来历你知道吗？