spring boot + vue cli 3 整合开发(附带简单的项目实战)

随着webpack的流行 现在大部分项目都是前后端分离. 但总有一些小项目在初期就只有1-2个后端做开发, 而且 vue 确实很容易上手 webpack的压缩和性能优化也确实好用. 因此做了个小Demo 有朋友喜欢的话可以多多讨论.
使用IDE : idea
系统 : win10(用mac的朋友可能需要修改一部分内容)
demo: https://github.com/xiongmaowang/spring-vue
项目结构如图:

添加了vue 文件夹作为vue项目路径

目的

1. 让项目打包一键化
2. 让项目运行一键化
3. 根据文件目录生成router

让项目打包一键化

创建 maven plugin 用于maven编译时运行 vue 项目
核心代码如下

@Mojo( name = "compile",defaultPhase = LifecyclePhase.GENERATE_RESOURCES)
public class CompileMojo extends AbstractMojo {
@Override
public void execute() throws MojoExecutionException {
//根据项目路径运行 yarn build命令
Process run = Runtime.getRuntime().exec(new String[]{"cmd","/c","yarn build"},null ,Global.projectPath.resolve("vue").toFile());
try {
run.waitFor();
} catch (InterruptedException e) {
e.printStackTrace();
}
}
}
这样执行compile以上的命令之后将会在 项目路径/vue 上运行打包命令.
可以使用我的maven仓库
http://47.98.117.200:8081/nexus/content/repositories/releases
项目的pom文件上加上
<plugin>
<groupId>com.xmw</groupId>
<artifactId>cmd</artifactId>
<version>1.1</version>
<executions>
<execution>
<id>compile</id>
<goals>
<goal>compile</goal>
</goals>
</execution>
</executions>
</plugin>

然后我们更改vue项目的配置文件 (vue.config.js ).

module.exports = {
//打包后输出到spring boot 项目的output上
outputDir:"../target/classes/static"
}

让项目开发环境运行一键化

让 springboot 运行的时候执行 cmd命令

@Component
public class StartRunner implements CommandLineRunner {
@Value("${spring.profiles.active}")
private String profile;
@Override
public void run(String... args) {
try {
if("dev".equals(profile)){
if(Files.exists(GlobalUtil.vuePath)){
if(!nodeIsRun()){
CmdUtil.run(GlobalUtil.vuePath, "start","cmd.exe","/k","yarn serve --open");
}
}
}
}catch (Exception e){
e.printStackTrace();
}
}
}

当然我们开发的时候 肯定会频繁重启spring boot 项目. 为了避免重复启动 我们可以根据 cmd命令判断 node 是否运行.

private static boolean nodeIsRun(){
BufferedReader br=null;
boolean result = false;
try {
Process p = CmdUtil.run(null,"tasklist | findstr \"node.exe\"");
br=new BufferedReader(new InputStreamReader(p.getInputStream(), Charset.forName("GBK")));
String line=null;
while((line=br.readLine())!=null){
result = true;
}
} catch (Exception e) {
e.printStackTrace();
}  finally{
if(br!=null){
try{
br.close();
}catch(Exception e){
e.printStackTrace();
}
}
}
return result;
}

我们其实可以用Run/Debug Configuration 的 Befor launch 设置命令后去运行.但我更加喜欢上面这个选项

…待补