使用Gradle整合SpringBoot+Vue.js-開發調試與打包

首先非常感謝kevinz分享的文章《springboot+gradle+vue+webpack 組合使用》，這文章對我的幫助非常大。

我是做Java后臺開發的，一般做Java的要做網頁都是用jsp，但我并不喜歡在jsp代碼中使用jstl標簽，我一直想找一個Java能用的前后端分離的解決方案。目前確定比較好的組合是：前臺頁面用Vue.js，后臺用SpringBoot。但是Vue.js在網上能找到的都是需要Node.js環境進行打包的，這使得不懂Node.js的Java程序員望而卻步。

在此之前，為了能用上Vue.js快速開發網頁，我利用Vue.js的異步組件的特性來加載組件，并配合vue-router來實現組件的視圖切換。這樣子就能用傳統的JavaScript寫法在網頁端用上Vue.js。對于小型的項目是能適用的，但是對于大型的項目組織起來比較麻煩，而且沒有代碼壓縮、混淆的功能。

在看到kevinz的文章后，我認真研究了，并稍作修改，在這里記下學習的筆記。

我的開發環境如下：

IDE：Intellij IDEA

JDK：Java8

Gradle：3.3

Node.js：6.10.1

Vue-CLI：2.8.1

1.Node.js安裝與配置

到官網下載最新的Node.js安裝

由于Node.js安裝后，默認的node_modules和緩存文件是存在C盤的，最好是修改成其它盤。

在其它盤創建Node.js緩存文件夾,如：

E:\_development\nodejs\global 存放例如用`npm install -g express`命令安裝的模塊文件E:\_development\nodejs\cache? 存放下載緩存

找到【nodejs安裝目錄】/node_modules/npm/npmrc 文件，用txt打開，修改配置：

prefix=E:\_development\nodejs\global? 指定全局安裝的node模塊的目錄

cache=E:\_development\nodejs\cache? ? 指定緩存目錄registry=https://registry.npm.taobao.org? 指定使用國內的淘寶的Node.js鏡像

為了測試配置是否成功，運行一下命令npm install -g express安裝一個express試試，Java程序員可能不知道，express是Node.js的后端mvc框架，類似Java中的SpringMVC。如果安裝成功，會生成一個E:_developmentnodejsglobalnode_modules目錄，express的文件就在該目錄下。

新增環境變量：

NODE_PATH=E:\_development\nodejs\global\node_modules

Path環境變量加入路徑：

E:\_development\nodejs\global 加入該路徑，才能使用后面安裝vue-cli后的vue命令

2.vue-cli安裝

vue-cli中cli是command line interface的縮寫，安裝很簡單：npm install -g vue-cli，-g是全局安裝的意思。安裝過程可能比較久。安裝完可以通過vue -V查看是否安裝成功。如下圖：


3.在IDEA搭建項目框架

創建整體工程的結構是，先創建一個總工程，叫show，再創建兩個子模塊，一個叫server，一個叫web。

打開IDEA，File-->New-->Project-->Gradle-->取消勾選Java-->Next。如下圖：


輸入父工程的信息，如下圖：


設置Gradle相關配置，由于網絡特殊原因，最好用本地的Gradle庫，配置如下圖：


設置項目存放路徑，如下圖：


項目創建出來就除了Gradle的配置文件，其它什么都沒有，接下來要創建兩個子工程server和web。show項目創建后如下圖：


創建server子項目，對著show項目：

右鍵-->New-->Module-->Gradle-->勾選Java

-->Next-->ArtifactId填"server"

-->Next-->Finished

創建web子項目，對著show項目：

右鍵-->New-->Module-->Gradle-->勾選Javaweb

-->Next-->ArtifactId填"web"

-->Next-->Finished

將show總項目的build.gradle文件修改成如下配置：

group 'com.gongshi'

version '1.0'

將show總項目的setting.gradle文件修改成如下配置：

rootProject.name = 'show'

include 'server'

include 'web'

將web子項目的build.gradle文件修改成如下配置：

plugins {

id "com.moowork.node" version "1.1.1"

id 'java'

}

//調用npm run build命令的Gradle任務

task npmBuild(type: NpmTask, dependsOn: npmInstall) {

group = 'node'

args = ['run', 'build']

}

//Gradle的java插件的jar任務，依賴npmBuild,即web子模塊打jar包前必須運行npm run build

jar.dependsOn npmBuild

//調用npm run dev

task npmDev(type: NpmTask, dependsOn: npmInstall) {

group = 'node'

args = ['run', 'dev']

}

在上面的代碼中，id "com.moowork.node" version "1.1.1"一行是加入了一個Gradle插件，叫gradle-node-plugin,該插件可以通過調用Gradle命令來調用node.js的命令或npm的命令。插件自帶了一些內容的命令，如：gradle npmInstall用于運行npm install命名，另外還有：

$ gradle npm_install

$ gradle npm_update

$ gradle npm_list

$ gradle npm_cache_clean

...

將server子項目的build.gradle文件修改成如下配置：

plugins {

id 'org.springframework.boot' version '1.5.2.RELEASE'

id 'java'

}

jar {

baseName = 'server'

version =? '1.0'

}

repositories {

//使用淘寶的maven鏡像

maven{ url 'http://maven.aliyun.com/nexus/content/groups/public'}

}

dependencies {

compile project(':web')//server模塊依賴web模塊

compile("org.springframework.boot:spring-boot-starter-web")

compile("org.springframework.boot:spring-boot-devtools")

testCompile("org.springframework.boot:spring-boot-starter-test")

}

在上面的代碼中，需要特別注意的是compile project(':web')，這個設置能在server打包時把web的資源先打包，并作為依賴，加入到server項目生成的jar包中。

13.在IDEA右側找到Gradle的欄目，點擊Refresh All Gradle Projects, IDEA會按找各個build.gradle文件的配置，下載依賴的jar。


到這里為止，項目的結構搭建好了，下一步是先編寫一下SpringBoot的代碼，把一個簡單Java后臺跑起來。

4.編寫SpringBoot的后臺

1.創建包com.gongshi，創建類：Application.java。如下：

package com.gongshi;

import org.slf4j.Logger;

import org.slf4j.LoggerFactory;

import org.springframework.boot.SpringApplication;

import org.springframework.boot.autoconfigure.SpringBootApplication;

import org.springframework.boot.web.servlet.ServletRegistrationBean;

import org.springframework.context.annotation.Bean;

import org.springframework.web.context.WebApplicationContext;

import org.springframework.web.servlet.DispatcherServlet;

@SpringBootApplication

public class Application {

private static final Logger logger = LoggerFactory.getLogger(Application.class);

public static void main(String[] args) {

SpringApplication.run(Application.class);

logger.info("SpringBoot server stated on port: 8080");

}

//增加一個SpringMVC的DispatcherServlet，接收前臺/api開頭的請求

@Bean

public ServletRegistrationBean apiV1ServletBean(WebApplicationContext wac) {

DispatcherServlet servlet = new DispatcherServlet(wac);

ServletRegistrationBean bean = new ServletRegistrationBean(servlet, "/api/*");

bean.setName("ApiServlet");

return bean;

}

}

3.創建包com.gongshi.controller，創建類：AppController.java。如下：

package com.gongshi.controller;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RestController;import java.util.HashMap;import java.util.Map;@RestController@RequestMapping("/app")public class AppController { //簡單的后臺接口，用于測試 @RequestMapping("/info") public Object info(){ Mapmap = new HashMap<>();

map.put("info","hello hello hello");

return map;

}

}

3.在server/src/main/resources目錄下，創建一個staic目錄，創建一個html頁面，用于測試，如下：

index.html


Title

Hello Spring Boot

4.暫時注釋掉server/builde.gradle中的compile project(':web')配置（因為web子項目未配置好vue.js相的內容），在IDEA右側Gradle欄目，點擊運行server的bootRun任務，bootRun任務會運行Application.java下的main方法。啟動Spring Boot，如下圖：


為了測試后臺是否正常運行，分別訪問一下：

http://localhost:8080，結果如下：


http://localhost:8080/index.html，結果如下：


http://localhost:8080/app/info，結果如下：


以上三個結果中，需要注意下第1個和第2個。Spring Boot默認會將server/src/main/resources/static下的文件作為靜態資源，提供給外部訪問。當訪問http://localhost:8080時，發現static有index.html文件，默認會顯示到瀏覽器端。這就是為什么1和2的結果是一樣的。

5.編寫Vue.js的前臺

在這里前臺使用vue-cli生成前臺的模板。隨便打開一個文件夾，比如：D:demo,按住shift+右鍵-->在此處打開命令窗口，即可打開一個命令行，輸入命令vue init webpack web,其中webpack是用webpack做vue.js的打包工具，web是生成的模板名稱。依次做以下的選擇：

Project name --> web

Project description --> A Vue.js project

Author --> Hello

Vue build --> 回車

Install vue-router ? --> y

Use ESlint to lint your code? --> n

Setup unit tests with Karma + Mocha? --> n

Setup e2e tests with Nightwatch? --> n

2.執行以上步驟后，vue-cli工具就會將項目模板生成到D:demoweb目錄，此時把web目錄下所有文件拷貝到IDEA的show/web子項目中。如下圖：


3.IDEA下方打開Terminal命令行終端，執行命令：cd web，npm install，這樣子npm就會根據package.js中的信息下載依賴的模塊。安裝后show/web/目錄下會出現node_modules目錄。如下圖：


4.此時需要測試一下vue-cli搭建的web子項目是否正確，打開IDEA右側Gradle欄目，找到npmDev任務，雙擊運行一下，任務運行成功會自動打開瀏覽器，顯示localhost:8080，顯示Vue的模板頁面。如下圖：


6.修改Vue.js的前臺配置

因為gradle構建輸出目錄是build，vue-cli生成的模板的構建腳本的目錄也是build，因此這里要把構建腳本的build目錄修改成script：點選show/web/build目錄，shift+F6重命名，將show/web/build目錄改成script目錄,避免與gradle的構建輸出目錄沖突。

修改show/web/package.json中與build目錄相關的配置：


3.修改show/web/script/webpack.dev.conf.js中與build目錄相關的配置：

4.修改show/web/config/index.js中的配置,包括webpack打包輸出位置，以及配置代理避免跨域問題，具體修改項看下面注釋：

show/web/config/index.js：

// see http://vuejs-templates.github.io/webpack for documentation.

var path = require('path')

var assetsRoot = path.resolve(__dirname, '../build/resources/main/static')// <-----1.add

module.exports = {

build: {

env: require('./prod.env'),

index: path.resolve(assetsRoot, 'index.html'),// <-----2.change

assetsRoot: assetsRoot,// <-----3.change

assetsSubDirectory: 'assets',// <-----4.change

assetsPublicPath: '/',

productionSourceMap: true,

// Gzip off by default as many popular static hosts such as

// Surge or Netlify already gzip all static assets for you.

// Before setting to `true`, make sure to:

// npm install --save-dev compression-webpack-plugin

productionGzip: false,

productionGzipExtensions: ['js', 'css'],

// Run the build command with an extra argument to

// View the bundle analyzer report after build finishes:

// `npm run build --report`

// Set to `true` or `false` to always turn it on or off

bundleAnalyzerReport: process.env.npm_config_report

},

dev: {

env: require('./dev.env'),

port: 3000,// <-----5.change

autoOpenBrowser: true,

assetsSubDirectory: 'assets',// <-----6.change

assetsPublicPath: '/',

proxyTable: {// <-----7.change

'/api/**': 'http://localhost:8080'//代理前臺/api開頭的請求，代理到8080端口，spring boot的訪問端口

},

// CSS Sourcemaps off by default because relative paths are "buggy"

// with this option, according to the CSS-Loader README

// (https://github.com/webpack/css-loader#sourcemaps)

// In our experience, they generally work as expected,

// just be aware of this issue when enabling this option.

cssSourceMap: false

}

}

5.測試show/web子項目的開發環境。關閉spring boot后臺，在IDEA右側Gradle欄目找到npmDev任務并運行。如果運行成功，會自動打開瀏覽器顯示http://localhost:3000，并顯示Vue.js的模板頁面，此時找到show/web/src/components/Hello.vue，修改一點內容：


exportdefault{? name: 'hello',data() {return{msg: 'WelcometoYourVue.jsApp333333333'//

打開瀏覽器查看http://localhost:3000，如果對應的內容更新了，則表明web子項目的開發環境正確。

如果運行npmDev報錯，有可能是多次運行npmDev命令，有其它Node.js進程占用了端口，打開任務管理器關閉即可，如下圖：


5.測試show/web子項目的打包。在IDEA右側Gradle欄目找到npmBuild任務并運行。如果運行成功，webpack打包的前端資源會輸出到show/web/build目錄下，如下圖：


注意：

我把webpack的打包輸出路徑故意設置成build/resources/main/static，這樣子，web子項目打成jar包后，在classpath中的路徑就是/static目錄了，即跟spring boot默認的靜態資源查找路徑是一樣的。

再者，server子項目依賴web項目（show/server/build.gradle中的compile project(':web')配置），所以server子項目打jar包前會先將web子項目打成jar包，web子項目的jar包中已經包含了webpack輸出的靜態資源。

所以，當server子項目打包后，訪問http://localhost:8080/index.html就能訪問到web子項目webpack打包的輸出的index.html文件。

注意：

server子項目打包前，請先刪除show/server/src/main/resources/static目錄，避免與web子項目打包過來的文件重復。

7.開發調試

先運行show/server子項目的bootRun任務，啟動Spring Boot

再運行show/web子項目的npmDev任務，啟動node的開發服務器

當show/web子項目有請求需要調用Spring Boot后臺，加上/api前綴，請求即可代理從node的開發服務器http://localhost:3000/api/xxxx代理到http://localhost:8080/api/xxxx

而在開發前臺頁面時候（對show/web/src目錄下的文件修改），應該訪問http://localhost:3000/，而不是8080端口，訪問3000端口，即可看到頁面修改的即時效果。

8.打包

運行show/server子項目的build任務，即可完成打包。打包的jar包已經包含show/web子項目的輸出內容。




? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?----文章是復制來的，感謝大牛的分享

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容