springboot vue前后端分离项目如何部署

### 部署 Spring Boot 和 Vue.js 前后端分离项目的指南 #### 准备工作 为了成功部署基于 Spring Boot 的后端服务以及由 Vue.js 开发的前端应用，需先确认已安装必要的工具链，包括但不限于 JDK、Maven 或 Gradle 用于编译 Java 应用程序；Node.js 及 npm/yarn 来管理 JavaScript 资源文件。 #### 后端部分 - Spring Boot 应用打包与发布 对于 Spring Boot 构建的应用而言，在完成开发测试之后应该将其构建成可执行 JAR 文件。这通常通过 Maven 或者 Gradle 实现自动化构建过程[^1]： ```bash mvn clean package -DskipTests=true ``` 或者如果是采用 Gradle，则命令如下所示: ```bash ./gradlew build -x test ``` 上述操作会生成目标目录下的 `target` (Maven) 或者 `build/libs` (Gradle)，其中包含了应用程序运行所需的一切资源。接着可以利用 Docker 容器化技术来进一步简化部署流程并提高环境一致性保障[^2]: 创建一个简单的 Dockerfile 如下： ```dockerfile FROM openjdk:8-jdk-alpine VOLUME /tmp ARG DEPENDENCY=target/dependency COPY ${DEPENDENCY}/BOOT-INF/lib /app/lib COPY ${DEPENDENCY}/META-INF /app/META-INF COPY ${DEPENDENCY}/BOOT-INF/classes /app ENTRYPOINT ["java","-cp","app:app/lib/*","com.example.DemoApplication"] ``` #### 前端部分 - Vue.js 单页应用(SPA) 打包上线 针对单页面应用程序（SPA），Vue CLI 提供了一个非常方便的方式来进行生产环境优化后的静态资源导出。只需简单地执行以下指令即可得到适合发布的 dist 文件夹内的内容[^3]: ```bash npm run build ``` 此命令将会把整个项目压缩成最小化的 HTML/CSS/JS 文件集合，并放置于指定路径之下等待被 Web Server 处理分发给客户端浏览器加载显示出来。 #### 统一托管方案建议 考虑到前后两端可能分别位于不同的服务器实例上，因此有必要设置跨域资源共享(CORS)策略允许来自特定域名发起请求访问API接口数据。另外一种更为推荐的做法就是将两者共同部署在同一台机器上的不同子路径下面，比如 `/api/**` 对应后台 RESTful API 接口调用而根地址 `/` 则留给前端路由解析处理[^4]。 #### 使用 Nginx 进行反向代理配置 Nginx 是一款高性能 HTTP 和反向代理 web server, 在这里可以用作统一入口点负责转发流量至相应微服务组件之上。以下是基本样例配置片段展示如何实现这一点[^5]: ```nginx server { listen 80; server_name localhost; location /api/ { proxy_pass http://localhost: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; } location / { root html/dist; # vue app built files path try_files $uri $uri/ /index.html; } } ``` 这样当用户尝试浏览网站时就会自动匹配到对应的处理器去响应具体的业务逻辑需求了。