相关背景:

    在公司的一个项目中,前端使用的框架是vue.js,其中有需要使用npm run build进行前端打包。执行打包时,会默认将打包的前端静态资源文件(css/js/img等)输出到dist目录中。而spring boot只能访问src/main/resources/public下的静态资源文件,因此每次工程打包都得将dist目录下的资源文件手动拷贝到src/main/resources/public目录下,然后再执行mvn clean package命令进行打包,这样影响了开发效率。

    公司项目使用maven技术进行项目工程组织。

    问题思考:

    在执行mvn clean package命令时,利用maven插件执行npm run build命令,一次性完成整个过程。

    解决方式:

    1、利用maven插件:exec-maven-plugin

    详细的POM配置信息如下:

    1. <profiles> <!--考虑到window 和linux环境 npm命令格式的问题,使用maven的profile实现动态指定命令-->
    2. <profile>
    3. <id>window</id>
    4. <properties>
    5. <npm>npm.cmd</npm>
    6. </properties>
    7. <activation>
    8. <activeByDefault>true</activeByDefault>
    9. </activation>
    10. </profile>
    11. <profile>
    12. <id>linux</id>
    13. <properties>
    14. <npm>npm</npm>
    15. </properties>
    16. </profile>
    17. </profiles>
    1. <plugins>
    2. <plugin>
    3. <groupId>org.apache.maven.plugins</groupId>
    4. <artifactId>maven-war-plugin</artifactId>
    5. <version>2.4</version>
    6. <configuration>
    7. <failOnMissingWebXml>false</failOnMissingWebXml>
    8. <warName>ROOT</warName>
    9. </configuration>
    10. </plugin>
    11. <plugin>
    12. <groupId>org.springframework.boot</groupId>
    13. <artifactId>spring-boot-maven-plugin</artifactId>
    14. <version>1.5.1.RELEASE</version>
    15. <executions>
    16. <execution>
    17. <goals>
    18. <goal>repackage</goal>
    19. </goals>
    20. </execution>
    21. </executions>
    22. </plugin>
    23. <plugin>
    24. <groupId>org.codehaus.mojo</groupId>
    25. <artifactId>exec-maven-plugin</artifactId>
    26. <executions>
    27. <execution>
    28. <id>exec-npm-install</id>
    29. <phase>prepare-package</phase>
    30. <goals>
    31. <goal>exec</goal>
    32. </goals>
    33. <configuration>
    34. <executable>${npm}</executable>
    35. <arguments>
    36. <argument>install</argument>
    37. </arguments>
    38. <workingDirectory>${basedir}/src/main/webapp</workingDirectory>
    39. </configuration>
    40. </execution>
    41. <execution>
    42. <id>exec-npm-run-build</id>
    43. <phase>prepare-package</phase>
    44. <goals>
    45. <goal>exec</goal>
    46. </goals>
    47. <configuration>
    48. <executable>${npm}</executable>
    49. <arguments>
    50. <argument>run</argument>
    51. <argument>build</argument>
    52. </arguments>
    53. <workingDirectory>${basedir}/src/main/webapp</workingDirectory>
    54. </configuration>
    55. </execution>
    56. </executions>
    57. </plugin>
    58. </plugins>

    执行方式:

    windows环境 : mvn clean package -P window

    Linux环境 :mvn clean package -P linux

    上面是参考别人的,以下是我的测试:

    1. <build>
    2. <plugins>
    3. <plugin>
    4. <groupId>org.codehaus.mojo</groupId>
    5. <artifactId>exec-maven-plugin</artifactId>
    6. <version>1.6.0</version>
    7. <executions>
    8. <execution>
    9. <id>exec-npm-run-build</id>
    10. <phase>prepare-package</phase>
    11. <goals>
    12. <goal>exec</goal>
    13. </goals>
    14. <configuration>
    15. <executable>npm</executable>
    16. <arguments>
    17. <argument>run</argument>
    18. <argument>build:prod</argument>
    19. </arguments>
    20. <workingDirectory>${basedir}</workingDirectory>
    21. </configuration>
    22. </execution>
    23. </executions>
    24. </plugin>
    25. </plugins>
    26. </build>

    执行:

    windows环境 : mvn clean package