学习 Spring Boot（十）：集成 Vue 实现前后端分离

前后端分离是降低项目耦合的方式：前端工程师专注于实现前端开发，后端工程师专注于实现后端开发，前后端通过 REST API 进行交互。

Vue

创建 Maven 前端模块 web，使用 Vue Cli 在 web 模块根目录创建 Vue 工程：

vue create vue

之后提示选择默认配置还是手动配置，选择默认即可。

打包

编辑 pom.xml 文件，添加构建配置：

<build>  
    <plugins>
        <plugin>
            <groupId>com.github.eirslett</groupId>
            <artifactId>frontend-maven-plugin</artifactId>
            <version>1.6</version>
            <configuration>
                <workingDirectory>vue</workingDirectory>
                <installDirectory>bin</installDirectory>
            </configuration>
            <executions>
                <execution>
                    <id>install node and npm</id>
                    <goals>
                        <goal>install-node-and-npm</goal>
                    </goals>
                    <configuration>
                        <nodeVersion>${node.version}</nodeVersion>
                        <npmVersion>${npm.version}</npmVersion>
                    </configuration>
                </execution>

                <execution>
                    <id>npm install</id>
                    <goals>
                        <goal>npm</goal>
                    </goals>
                    <configuration>
                        <arguments>install</arguments>
                    </configuration>
                </execution>

                <execution>
                    <id>npm build</id>
                    <goals>
                        <goal>npm</goal>
                    </goals>
                    <configuration>
                        <arguments>run build</arguments>
                    </configuration>
                </execution>
            </executions>
        </plugin>
        <plugin>
            <artifactId>maven-resources-plugin</artifactId>
            <version>3.0.2</version>
            <executions>
                <execution>
                    <id>copy-resources</id>
                    <phase>validate</phase>
                    <goals>
                        <goal>copy-resources</goal>
                    </goals>
                    <configuration>
                        <outputDirectory>${basedir}/target/classes/public</outputDirectory>
                        <nonFilteredFileExtensions>
                            <nonFilteredFileExtension>otf</nonFilteredFileExtension>
                            <nonFilteredFileExtension>eot</nonFilteredFileExtension>
                            <nonFilteredFileExtension>svg</nonFilteredFileExtension>
                            <nonFilteredFileExtension>ttf</nonFilteredFileExtension>
                            <nonFilteredFileExtension>woff</nonFilteredFileExtension>
                            <nonFilteredFileExtension>woff.bak</nonFilteredFileExtension>
                            <nonFilteredFileExtension>woff2</nonFilteredFileExtension>
                        </nonFilteredFileExtensions>
                        <resources>
                            <resource>
                                <directory>${basedir}/vue/dist</directory>
                                <excludes>
                                    <exclude>src/**</exclude>
                                    <exclude>target/**</exclude>
                                    <exclude>pom.xml</exclude>
                                    <exclude>.DS_Store</exclude>
                                </excludes>
                                <filtering>true</filtering>
                            </resource>
                        </resources>
                    </configuration>
                </execution>
            </executions>
        </plugin>
    </plugins>
</build>

打包步骤如下：

① 下载 node 和 npm 二进制可执行文件；

② 在 vue 目录下，执行 npm install 命令，安装依赖；

③ 在 vue 目录下，执行 npm run build 命令，构建项目；

④ 拷贝 vue/dist 到 target/classes/public 目录。

编辑后端 server 模块 pom.xml 文件，添加前端 web 模块依赖：

<dependency>  
    <groupId>com.dyingbleed</groupId>
    <artifactId>web</artifactId>
    <version>${project.version}</version>
</dependency>