SpringBoot + Vue 项目打包部署教程
在现代应用开发中，前后端分离的架构越来越受到欢迎，本教程将详细介绍如何快速打包并部署一个基于 SpringBoot 和 Vue 的全栈项目。
1. 项目结构概述
一个典型的 SpringBoot + Vue 项目结构如下：
my-project
│
├── backend (SpringBoot)
│ ├── src
│ ├── pom.xml
│ └── ...
│
└── frontend (Vue)
├── src
├── package.json
└── ...
2. 后端（SpringBoot）打包
在这里，我们首先为 SpringBoot 后端项目进行打包。
- 修改
pom.xml配置
确保在 pom.xml 文件中配置了 Maven 插件来支持打包。
xml
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
- 打包命令
在终端中，切换到 backend 目录下，运行以下命令进行打包：
bash
mvn clean package
这条命令将会生成一个 .jar 文件，在 target 目录下。
- 运行后端
打包完成后，可以使用以下命令启动 SpringBoot 应用：
bash
java -jar target/my-project-0.0.1-SNAPSHOT.jar
默认情况下，SpringBoot 在 8080 端口启动，你可以在浏览器中访问 http://localhost:8080 检验是否成功。
3. 前端（Vue）打包
接下来，我们为 Vue 前端项目进行打包。
- 修改
vue.config.js文件
在 Vue 项目的根目录下创建或修改 vue.config.js 文件，以设置构建输出目录：
javascript
module.exports = {
outputDir: '../backend/src/main/resources/static'
}
通过这样的配置，Vue 打包后的文件会直接输出到 SpringBoot 的静态资源目录。
- 打包命令
在终端中，切换到 frontend 目录下，运行以下命令进行打包：
bash
npm run build
这条命令将会生成打包好的文件，通常在 dist 文件夹下，但由于我们设置了 outputDir，它们会被放置在 SpringBoot 后端的静态资源目录下。
4. 整体项目的运行
在完成了前后端的打包后，你可以直接运行 SpringBoot 应用，如下所示：
cd backend
java -jar target/my-project-0.0.1-SNAPSHOT.jar
5. 部署到服务器
如果你希望将项目部署到服务器，可以选择将后端的 .jar 文件上传到服务器上，同时确保该服务器安装了 JDK。然后，可以使用 scp 命令将 .jar 文件上传至服务器。
scp target/my-project-0.0.1-SNAPSHOT.jar user@your-server-ip:/path/to/deploy/
在服务器上，你可以使用同样的 Java 命令来运行应用。
6. Nginx 反向代理（可选）
如果你需要在生产环境中将前端与后端分开，也可以使用 Nginx 作为反向代理。
server {
listen 80;
location / {
root /path/to/frontend;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
location /api/ {
proxy_pass http://localhost:8080/;
}
}
以上配置将在 80 端口上监听请求，并将根目录的请求指向前端应用，将以 /api/ 开头的请求代理到运行在 8080 端口的 SpringBoot 应用。
结论
本文提供了一个简单的 SpringBoot + Vue 全栈项目的打包和部署教程。通过合理的目录结构和配置，能够快速部署一个前后端分离的全栈应用。希望对你有所帮助！
