标签：inputs java 项目 vuejs gradle proj

使用 gradle 整合 vuejs 项目与 java 项目

前后端分离是个大趋势了，用 vuejs 去做前端比起 jsp 方式或其它模板方式做起来方便多了，这种隔离更加彻底。把后台做成一个纯 API 方式，只管理业务逻辑和数据，前端管 UI ，使用数据驱动的 mvvm vuejs 。

前端的测试也非常方便，在后台还没有完成的情况下，使用 vue-test-suit 做测试，后台和前端、测试职责更加清楚，减少代码互相打架的情况。

编译时整合 vuejs 和 java 的后端也很简单，这里介绍一下通过 gradle 进行整合的过程。

创建 vuejs 项目

安装 vue-cli

npm install vue-cli -g

建立代码框架

vue init webpack proj

引入 gradle node 插件

要给 vuejs 项目加个 gradle 的配置，用 gradle 调用 node 编译项目

// build.gradle
plugins {
    id "com.github.node-gradle.node" version "1.3.0"
}

//调用npm run build命令的Gradle任务
task npmBuild(type: NpmTask, dependsOn: npmInstall) {
    inputs.files(fileTree('config'))
    inputs.files(fileTree('src'))
    inputs.files(fileTree('static'))
    inputs.files(fileTree('build'))
    inputs.file('package.json')
    inputs.file('package-lock.json')
    inputs.file('index.html')

    outputs.files(fileTree('dist'))

    group = 'node'
    args = ['run', 'build']
}

//调用npm run dev
task npmDev(type: NpmTask, dependsOn: npmInstall) {
    group = 'node'
    args = ['run', 'dev']
}

加了 gradle 配置后，就可以在父项目上引入这个 vuejs 项目

// settings.gradle
inclue(':proj')
project(':proj').projectDir = new File(settingsDir, '../proj')

注意要修改项目名和路径

后台项目引入 vuejs 的编译结果

在 java 后台项目，引入 vuejs 的编译任务和结果

// build.gradle
assemble.dependsOn project(':proj').getTasksByName('npmBuild', false)
processResources {
    from(project(':proj').file('dist').path) {
        into 'static'
    }
}

这里把 vuejs 项目的项目的编译结果（dist 目录）直接在 processRessource 降低加入到 static 目录，在 spring boot 里面能直接识别出来，如果是自己需要修改目标目录位置则要做相应的修改（如放到 resource 或 asset 目录）

OK，现在在 java 后台项目上运行 assemble 任务时，就能调用到 vuejs 项目的 npmBuild 任务，并把生成的 dist 目录加到 java 后台项目的编译结果中，做 war 或 bootJar 生成的结果包含了前端生成的结果，可以直接部署了。

标签：inputs,java,项目,vuejs,gradle,proj
来源： https://www.cnblogs.com/fengyc/p/10881130.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。