Spring Boot + Vue 打包部署的完整流程

本文将介绍如何使用Spring Boot和Vue.js构建一个Web应用，并将其打包部署。我们将使用Maven作为构建工具，通过npm安装Vue.js，以及使用Vue CLI创建和管理Vue项目。

1. 准备工作

在开始之前，确保你已经安装了以下工具：

  • Java Development Kit (JDK) - 用于开发和构建Spring Boot应用
  • Maven - 用于构建和管理Java项目
  • Node.js 和 npm - 用于安装Vue.js和管理前端依赖

2. 创建Spring Boot项目

首先，我们需要创建一个Spring Boot项目。可以通过Spring Initializr来快速创建一个基本的Spring Boot项目。在浏览器中打开 [Spring Initializr]( ，然后按照以下步骤进行配置：

  • 选择"Project"为"Gradle Project"或"Maven Project"，这里我们选择Maven。
  • 输入"Group"和"Artifact"，这里我们使用示例项目名"com.example"和"springboot-vue-demo"。
  • 选择"Packaging"为"Jar"。
  • 选择Java版本，这里我们选择"8"。
  • 添加"Spring Web"和"Thymeleaf"的依赖。

点击"Generate"按钮下载生成的项目压缩包，并解压到你选择的项目目录中。

3. 创建Vue项目

在继续之前，请确保你已经安装了Node.js和npm。打开命令行终端并运行以下命令来验证安装：

node -v
npm -v

如果正确显示版本号，则说明安装成功。

接下来，我们将使用Vue CLI来创建和管理Vue项目。在命令行终端中运行以下命令来全局安装Vue CLI：

npm install -g @vue/cli

安装完成后，进入你的Spring Boot项目目录，然后运行以下命令创建一个Vue项目：

vue create frontend

这将会提示你选择一个预设配置，你可以选择默认的配置。

创建完成后，进入Vue项目目录：

cd frontend

现在，我们已经创建了一个基本的Vue项目。可以使用以下命令来启动开发服务器：

npm run serve

在浏览器中打开 http://localhost:8080 ，你将看到Vue的欢迎页面。

4. 编写前端代码

使用你喜欢的代码编辑器打开Vue项目目录，并编辑 src/App.vue 文件。这是Vue应用的根组件，你可以在这里编写你的前端代码。

下面是一个简单的示例，显示一个Hello World的文本：

<template>
  <div>
    Hello World!
  </div>
</template>

<script>
export default {
  name: 'App',
}
</script>

<style>
h1 {
  color: blue;
}
</style>

保存文件后，浏览器将自动刷新并显示更新后的内容。

5. 集成前后端

现在，我们将把Vue项目集成到Spring Boot应用中。在Spring Boot项目的根目录中，创建一个新的目录 src/main/resources/static ，并将Vue项目的 dist 目录下的所有文件复制到这个目录中。这样，Spring Boot应用将会将静态资源直接从这个目录提供。

接下来，我们需要在Spring Boot中配置一个简单的路由来处理Vue应用的路由。

在Spring Boot项目的 src/main/java/com/example/demo 目录下，创建一个新的类 WebConfig.java ，并添加以下代码：

package com.example.demo;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        registry.addViewController("/").setViewName("forward:/index.html");
    }
}

这将配置一个路由，使得根路径 / 的请求可以重定向到 index.html 文件。

6. 打包和部署

现在，我们已经完成了项目的开发和集成。接下来，我们将把