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 设置命令后去运行.但我更加喜欢上面这个选项

…待补