Spring Boot + Vue 打包教程

1. 整体流程

下面是实现 "Spring Boot + Vue 打包" 的整体步骤：

步骤 描述
1 创建 Spring Boot 项目
2 配置前端构建环境
3 编写前端代码
4 打包前端代码
5 配置 Spring Boot 项目
6 运行 Spring Boot 项目

接下来，我们将逐步展开每一个步骤，并提供相应的代码和解释。

2. 创建 Spring Boot 项目

首先，我们需要创建一个 Spring Boot 项目。可以使用 Spring Initializr（[ Spring Boot 项目，选择 Maven 作为构建工具，并添加适当的依赖。

3. 配置前端构建环境

在 Spring Boot 项目中，我们需要配置前端构建环境，以便能够构建 Vue 项目并将其集成到 Spring Boot 项目中。

3.1 安装 Node.js

首先，确保你已经安装了 Node.js。你可以从 [ 下载并安装 Node.js。

3.2 安装 Vue CLI

Vue CLI 是一个用于快速搭建 Vue.js 项目的脚手架工具。我们需要全局安装 Vue CLI。

打开命令行窗口，运行以下命令安装 Vue CLI：

npm install -g @vue/cli

3.3 创建 Vue 项目

在 Spring Boot 项目的根目录下，运行以下命令创建一个新的 Vue 项目：

vue create frontend

这将在根目录下创建一个名为 "frontend" 的文件夹，其中包含了一个基本的 Vue 项目结构。

4. 编写前端代码

在 "frontend" 目录下，我们可以开始编写我们的前端代码。你可以使用任何喜欢的编辑器来编辑 Vue 组件和其他前端代码。

5. 打包前端代码

当我们完成了前端代码的编写之后，我们需要将其打包，并将其集成到 Spring Boot 项目中。

在 "frontend" 目录下，运行以下命令来构建前端项目：

npm run build

上述命令将会生成一个 "dist" 目录，其中包含了我们打包后的前端代码。

6. 配置 Spring Boot 项目

现在，我们需要将前端代码集成到 Spring Boot 项目中。在 Spring Boot 项目中，我们可以使用 Maven 插件来完成这个任务。

在 Spring Boot 项目的 pom.xml 文件中，添加以下插件：

<build>
    <plugins>
        <plugin>
            <groupId>com.github.eirslett</groupId>
            <artifactId>frontend-maven-plugin</artifactId>
            <version>1.10.0</version>
            <configuration>
                <nodeVersion>v12.16.1</nodeVersion>
                <npmVersion>6.13.4</npmVersion>
                <workingDirectory>frontend</workingDirectory>
                <installDirectory>target</installDirectory>
            </configuration>
            <executions>
                <execution>
                    <id>install node and npm</id>
                    <goals>
                        <goal>install-node-and-npm</goal>
                    </goals>
                    <phase>generate-resources</phase>
                </execution>
                <execution>
                    <id>npm install</id>
                    <goals>
                        <goal>npm</goal>
                    </goals>
                    <phase>generate-resources</phase>
                    <configuration>
                        <arguments>install</arguments>
                    </configuration>
                </execution>
                <execution>
                    <id>npm run build</id>
                    <goals>
                        <goal>npm</goal>
                    </goals>
                    <phase>generate-resources</phase>
                    <configuration>
                        <arguments>run build</arguments>
                    </configuration>
                </execution>
            </executions>
        </plugin>
    </plugins>
</build>

上述配置中，我们使用了 frontend-maven-plugin 插件来在构建过程中执行前端项目的构建命令。

7. 运行 Spring Boot 项目

现在，我们可以运行 Spring Boot 项目，并查看前端代码是否已经成功集成。

在命令行窗口中，进入