qoder通过qoder-cli一键生成spring boot+vue分离骨架，自动创建backend和frontend双模块，预置vite代理规则解决开发跨域，前端build.assetsdir设为"./"避免404，nginx托管dist并反向代理/api请求。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
用Qoder快速生成一个开箱即用的Spring Boot + Vue前后端分离项目，避免手动创建两个工程、配置跨域、调整打包路径、处理静态资源404等重复劳动。
使用qoder-cli一键生成分离骨架
这一步操作起来很简单，直接在终端执行命令即可生成完整目录结构。
第一步：确保已全局安装qoder-cli，若未安装，运行 npm install -g qoder-cli；安装后执行 qoder create my-project --template springboot-vue-separate。
第二步：等待命令执行完成，会在当前目录下生成 【my-project】 文件夹，内含 backend（Spring Boot）和 frontend（Vue 3 + Vite）两个独立子模块。
第三步：进入 frontend 目录，运行 npm install 安装依赖；再执行 npm run dev 启动前端开发服务器，默认监听 http://localhost:5173。
第四步：新开终端，进入 backend 目录，执行 mvn spring-boot:run 启动后端服务，默认监听 http://localhost:8080；此时前端已预置代理规则，所有 /api/ 请求自动转发至后端，无需手动配 CORS 或修改 axios baseURL。
配置开发阶段跨域代理（仅前端需改）
当本地调试时，Vite 开发服务器与 Spring Boot 端口不同，浏览器会拦截跨域请求。Qoder 生成的 frontend 已内置代理配置，但需确认是否生效。
方法一：检查 frontend/vite.config.ts 中的 server.proxy 是否包含如下配置：
{ '/api': { target: 'http://localhost:8080', changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, '') } }
方法二：若使用 Vue CLI 而非 Vite（极少见），则需修改 vue.config.js 的 devServer.proxy 字段，格式类似但 key 为 /api 而非对象嵌套。
【注意】不要在后端控制器上加 @CrossOrigin 注解来“解决”跨域——这会污染生产环境代码，且掩盖真实架构问题。
构建与部署：前后端分别打包
生产环境必须物理分离，前端静态资源由 Nginx 托管，后端以 JAR 独立运行。
前端打包：进入 frontend 目录，执行 npm run build；生成 dist 文件夹，其中 index.html 是唯一入口文件。
后端打包：进入 backend 目录，执行 mvn clean package -DskipTests；生成 target/my-project-backend.jar。
关键一步：打开 frontend/vite.config.ts，确认 build.assetsDir 和 base 配置为 "./"，否则部署到子路径时 CSS/JS 404；【这是导致页面空白的最常见原因】。
将 dist 整体复制到 Nginx 的 html 目录，修改 nginx.conf 的 location / 指向该路径，并添加 location /api { proxy_pass http://localhost:8080/api; } 代理规则。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
