共计 1309 个字符，预计需要花费 4 分钟才能阅读完成。
序
本文主要研究一下如何在 springboot 工程整合 vue
maven
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
新建 springboot 的 web 工程，默认会在 resources 目录下生成 static 以及 templates 文件夹
templates 文件用于存放后端渲染的模板，这里我们采用前后端分离的方式，因而该文件夹就没有用了
static 文件夹就是存放静态文件的地方
plugin
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
<!– mvn process-resources –>
<plugin>
<artifactId>maven-resources-plugin</artifactId>
<executions>
<execution>
<id>copy Vue.js 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>${basedir}/vue-demo/dist</directory>
<includes>
<include>static/</include>
<include>index.html</include>
</includes>
</resource>
</resources>
</configuration>
</execution>
</executions>
</plugin>
</plugins>
</build>
这里我们使用了 maven-resources-plugin 插件，将 vue 工程 npm run build 之后的 dist 文件夹下的文件拷贝到 static 目录下
这里我们假设 vue 工程名为 vue-demo，在这个 springboot 工程的根目录下
对于 vue 工程，首先执行 npm run build 生成静态文件，之后对 maven 工程执行 mvn process-resources，就可以一键拷贝
小结
在 springboot 工程整合 vue 的话，将静态文件拷贝到 src/main/resources/static 目录下即可，这样就可以在 springboot 工程打开静态文件了，对 api 的请求也无需再转发，也没有跨域问题，比较适合管理后台前端资源的整合。
doc
A Lovely Spring View: Spring Boot & Vue.js