SpringBoot前后端整合

背景

项目中后台代码用的SpringBoot，前端代码用的Vue，现在想放到一个项目中 用maven管理

代码结构

总结构大概如下：

• all
  • backend

    - pom.xml
    

  • frontend

    - pom.xml
    

  • pom.xml

思路

• 1. 编译前端代码
• 2. 复制编译好的前端文件到后台代码
• 3. 编译后台代码

pom

主工程

<modules>
  <module>frontend</module>
  <module>backend</module>
</modules>

主要是写好模块 指定顺序

frontend

<build>
   <plugins>
     <!-- 配置npm安装 -->
     <plugin>
       <groupId>com.github.eirslett</groupId>
       <artifactId>frontend-maven-plugin</artifactId>
       <version>1.6</version>
       <executions>
         <!-- 安装nodejs和npm-->
         <execution>
           <id>install node and npm</id>
           <goals>
             <goal>install-node-and-npm</goal>
           </goals>
           <configuration>
             <nodeVersion>v10.12.0</nodeVersion>
             <npmVersion>6.4.1</npmVersion>
           </configuration>
         </execution>
         <!-- 安装webpack -->
         <execution>
           <id>npm install webpack</id>
           <goals>
             <goal>npm</goal>
           </goals>
           <phase>generate-resources</phase>
           <configuration>
             <arguments>install webpack -g</arguments>
           </configuration>
         </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插件进行一系列的操作:

• 1.安装nodejs和npm命令
• 2.安装webpack
• 3.安装项目依赖
• 4.编译项目

backend

<build>
  <plugins>
    <!-- 复制前端编译好的页面 -->
    <plugin>
      <artifactId>maven-resources-plugin</artifactId>
      <executions>
        <execution>
          <id>copy frontend content</id>
          <phase>generate-resources</phase>
          <goals>
            <goal>copy-resources</goal>
          </goals>
          <configuration>
            <!-- 复制文件的目的目录  -->
            <outputDirectory>src/main/resources/static/</outputDirectory>
            <overwrite>true</overwrite>
            <resources>
              <resource>
                <!-- 复制文件的源目录 -->
                <directory>${project.parent.basedir}/frontend/target/dist</directory>
                <filtering>false</filtering>
                <includes>
                  <include>**/*</include>
                </includes>
              </resource>
            </resources>
          </configuration>
        </execution>
      </executions>
    </plugin>
  </plugins>
</build>

主要是利用frontend-maven-plugin插件,将编译好的前端文件复制到后台代码指定目录中

结果

至此，即可完成需求
根目录下执行mvn package即可编译完整项目