前后端项目分离打包(vue+springboot)

一般做法：前端用 webpack打包完生成 dist 内容后 手动 复制 dist 文件夹的内容到后端项目的 main/resources/public中。

推荐做法，使用 maven 插件来自动管理：

1. 前端转成 maven 项目，加入前端的 maven 插件，支持 maven 执行 npm 以及 webpack 命令的执行；

   <build>
       <plugins>
           <plugin>
               <groupId>com.github.eirslettgroupId>
               <artifactId>frontend-maven-pluginartifactId>
               <version>${frontend-maven-plugin.version}version>
               <executions>
                   <execution>
                       <id>install node and npmid>
                       <goals>
                           <goal>install-node-and-npmgoal>
                       goals>
                       <configuration>
                           <nodeVersion>v9.11.1nodeVersion>
                       configuration>
                   execution>
                   
                   <execution>
                       <id>npm installid>
                       <goals>
                           <goal>npmgoal>
                       goals>
                       
                       <phase>generate-resourcesphase>
                       
                       <configuration>
                           <arguments>installarguments>
                       configuration>
                   execution>
                   
                   <execution>
                       <id>npm run buildid>
                       <goals>
                           <goal>npmgoal>
                       goals>
                       <configuration>
                           <arguments>run buildarguments>
                       configuration>
                   execution>
               executions>
           plugin>
       plugins>
   build>
   

2. 后端要用 maven 拷贝 前端的 dist 文件夹到 main/resources/public 中，也是用插件

               <plugin>
               <artifactId>maven-resources-pluginartifactId>
               <executions>
                   <execution>
                       <id>copy Vue.js frontend contentid>
                       <phase>generate-resourcesphase>
                       <goals>
                           <goal>copy-resourcesgoal>
                       goals>
                       <configuration>
                           <outputDirectory>src/main/resources/publicoutputDirectory>
                           <overwrite>trueoverwrite>
                           <resources>
                               <resource>
                                   <directory>${project.parent.basedir}/{your-project}/target/distdirectory>
                                   <includes>
                                       <include>static/include>
                                       <include>index.htmlinclude>
                                   includes>
                               resource>
                           resources>
                       configuration>
                   execution>
               executions>
           plugin>
   

3. 配置完成。打包时直接在两个项目的共同根目录执行 mvn clean package 即完成前后端项目的打包及拷贝，成功后直接运行后端项目即可。