gradleを使ってvuejsプロジェクトとjavaプロジェクトを統合します.

gradleを使ってvuejsプロジェクトとjavaプロジェクトを統合します.
前後端分離が大きな流れになりました.jsp方式や他のテンプレート方式よりも、vuejsで先端を作る方がずっと便利です.このような隔離はもっと徹底的です.バックグラウンドを純粋なAPI方式にして、業務ロジックとデータだけを管理して、フロントエンドはUIを管理して、データ駆動のmvm 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プロジェクトのプロジェクトをコンパイルした結果、直接にprocessResourceでstaticディレクトリに入れます.spring bootで直接識別できます.もし自分が目標ディレクトリの位置を変更したいなら、それに応じて修正します.
OKです.javaバックグラウンドプロジェクトでassmbleタスクを実行すると、vuejsプロジェクトのnpmBuildタスクを呼び出すことができます.また、作成したdistディレクトリをjavaバックグラウンドプロジェクトのコンパイル結果に加えて、warまたはbootJarを作成した結果、フロントエンド生成の結果を含めて、直接配置することができます.