2. 程式人生 > >使用Gradle整合SpringBoot+Vue.js-開發除錯與打包

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

阿新 • • 發佈：2019-02-11

非常感謝兩位作者：

做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安裝與配置

  1. 到官網下載最新的Node.js安裝
  2. 由於Node.js安裝後，預設的node_modules和快取檔案是存在C盤的，最好是修改成其它盤。

  3. 在其它盤建立Node.js快取資料夾,如：

    E:\_development\nodejs\global 存放例如用`npm install -g express`命令安裝的模組檔案
E:\_development\nodejs\cache  存放下載快取

  4. 找到【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映象
  5. 為了測試配置是否成功，執行一下命令npm install -g express安裝一個express試試，Java程式設計師可能不知道，express是Node.js的後端mvc框架，類似Java中的SpringMVC。如果安裝成功，會生成一個E:_developmentnodejsglobalnode_modules目錄，express的檔案就在該目錄下。

  6. 新增環境變數：

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

  7. 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搭建專案框架

  1. 建立整體工程的結構是，先建立一個總工程，叫show，再建立兩個子模組，一個叫server，一個叫web。
  2. 開啟IDEA，File-->New-->Project-->Gradle-->取消勾選Java-->Next。如下圖：
  3. 輸入父工程的資訊，如下圖：
  4. 設定Gradle相關配置，由於網路特殊原因，最好用本地的Gradle庫，配置如下圖：
  5. 設定專案存放路徑，如下圖：
  6. 專案創建出來就除了Gradle的配置檔案，其它什麼都沒有，接下來要建立兩個子工程server和web。show專案建立後如下圖：

  7. 建立server子專案，對著show專案：

    右鍵-->New-->Module-->Gradle-->勾選Java
-->Next-->ArtifactId填"server"
-->Next-->Finished

  8. 建立web子專案，對著show專案：

    右鍵-->New-->Module-->Gradle-->勾選Javaweb
-->Next-->ArtifactId填"web"
-->Next-->Finished

  9. 將show總專案的build.gradle檔案修改成如下配置：

    group 'com.gongshi'
version '1.0'

  10. 將show總專案的setting.gradle檔案修改成如下配置：

    rootProject.name = 'show'
include 'server'
include 'web'

  11. 將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
...

  12. 將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。如下：

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。如下：

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(){
        Map<String,Object> map = new HashMap<>();
        map.put("info","hello hello hello");
        return map;
    }
    
}

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<h1>Hello Spring Boot</h1>
</body>
</html>

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

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

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

5.編寫Vue.js的前臺

  1. 在這裡前臺使用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的前臺配置

  1. 因為gradle構建輸出目錄是build，vue-cli生成的模板的構建指令碼的目錄也是build，因此這裡要把構建指令碼的build目錄修改成script：點選show/web/build目錄，shift+F6重新命名，將show/web/build目錄改成script目錄,避免與gradle的構建輸出目錄衝突。
  2. 修改show/web/package.json中與build目錄相關的配置：
  "scripts": {
    "dev": "node build/dev-server.js",
    "build": "node build/build.js"
  },
    改成：
  "scripts": {
    "dev": "node script/dev-server.js",
    "build": "node script/build.js"
  },

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

Object.keys(baseWebpackConfig.entry).forEach(function (name) {
  baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])
})
    改成：
Object.keys(baseWebpackConfig.entry).forEach(function (name) {
  baseWebpackConfig.entry[name] = ['./script/dev-client'].concat(baseWebpackConfig.entry[name])
})

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，修改一點內容：

<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App 333333333'//<-----change
    }
  }
}
</script>

開啟瀏覽器檢視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.開發除錯

  1. 先執行show/server子專案的bootRun任務，啟動Spring Boot
  2. 再執行show/web子專案的npmDev任務，啟動node的開發伺服器
  3. 而在開發前臺頁面時候（對show/web/src目錄下的檔案修改），應該訪問http://localhost:3000/，而不是8080埠，訪問3000埠，即可看到頁面修改的即時效果。

8.打包

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

相關推薦

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

非常感謝兩位作者：做Java後臺開發的，一般做Java的要做網頁都是用jsp，但我並不喜歡在jsp程式碼中使用jstl標籤，我一直想找一個Java能用的前後端分離的解決方案。目前確定比較好的組合是：前臺頁面用Vue.js，後臺用SpringBoot。但是Vue.js在網上能找

Vue.js 開發實踐：實現精巧的無限加載與分頁功能

cti head 設定 命令 webpack transform style time default https://segmentfault.com/a/1190000005351971#articleHeader9 本篇文章是一篇Vue.js的教程，目標在於用一

Vue.js 開發實踐：實現精巧的無限載入與分頁功能

https://segmentfault.com/a/1190000005351971#articleHeader9 需求分析 當一個頁面中資訊量過大時（例如一個新聞列表中有200條新聞需要展示），就會產生問題，例如： 資料量過大，影響載入速度 使用者體驗差，很難定位到之前自己看

Springboot vue.js html 前後分離 跨域 整合程式碼生成器 shiro許可權

特別注意： Springboot 工作流 前後分離 + 跨域 版本 （許可權控制到選單和按鈕） 後臺框架：springboo

Springboot vue.js html 跨域 整合程式碼生成器 shiro許可權 前後分離

特別注意： Springboot 工作流 前後分離 + 跨域 版本 （許可權控制到選單和按鈕） 後臺框架：springboo

vue.js開發環境搭建

回車 try htm 成功 效果 webpack log 表示 測試 1、安裝node.js，忽略 2、基於node.js，利用淘寶npm鏡像安裝相關依賴在cmd裏直接輸入：npm install -g cnpm –-registry=https://regi

分針網—每日分享：Vue.js事件處理器與表單控件綁定

pan alt default efault mage add ref comm 功能 事件處理主要通過v-on這個指令來執行。 事件監聽及方法處理 1.簡單的可以直接內嵌在頁面。 2.可以通過將方法定義在methods中，然後再v-on中執行 3

vue.js開發環境搭建以及創建一個vue實例

init 技術分享 自動 安裝失敗 das 命令行 環境搭建 項目 向上 Vue.js 是一套構建用戶界面的漸進式框架。Vue 只關註視圖層， 采用自底向上增量開發的設計。Vue 的目標是通過盡可能簡單的 API 實現響應的數據綁定和組合的視圖組件。 在使用 vue.js

vue.js開發環境初步搭建、腳手架工具安裝（node.js安裝）

環境搭建 ima pil utf node.js jni 可用 turn t430 當然，首先是node.js的安裝，百度node,js出現 （為後面的鋪墊） 選擇一個版本進行安裝，安裝完成後，在cmd命令行中輸入node --version（註意有兩個 --）查看

使用VS2017開發APP中使用VUE.js開發遇到打包出來的android文件 在低版本的android（4.3）中無法正常使用

vue.js 文件 默認 項目 let ons dir file 開發app 使用VS2017開發VUE的APP應用遇到的問題集合 1， 打包出來的apk文件在Android 6.0版本以上手機可以正常打開，在Android 4.3版本手機上無法打開 原因：一開

在window下搭建Vue.Js開發環境(轉)

圖片 需要 int alt first .html ron 接下來 post nodejs官網http://nodejs.cn/下載安裝包，無特殊要求可本地傻瓜式安裝，這裏選擇2017-5-2發布的 v6.10.3 cmd命令行： node -v //顯示

使用PM2搭建在線vue.js開發環境（以守護進程方式熱啟動）

就是 自己 yui 是我 pub 分享 scripts OS 個人 項目以vue.js+layUI的作為前端開發技術棧，需要有一個在線的環境供項目成員實時查看效果，總不能每次都webpack打包發布後才能看到效果吧！剛開始就簡單使用npm run dev命令熱啟動，但是sh

vue.js開發環境安裝教程

Vue.js一、nodejs安裝—npm安裝1.nodejs安裝①下載對應系統版本的Node.js：https://nodejs.org/en/download/② 運行程序開始安裝，一路next最終install即可2.npm安裝（新版Node.js已自帶npm）③檢測是否安裝成功。快捷鍵win+R，輸入c

springboot 入門2 開發環境與生產環境採用不同配置問題

目開發中我們通常有兩套配置資訊  分別配置了我們的資料來源資訊等？ 那麼我們要如何不通過修改配置檔案大量配置來實現簡單的修改與配置來實現相關配置載入功能  首先springboot 有一個核心的配置檔案appication.yml配置檔案  通常我們的所有配置都是配置在當前一

vue.js 中 :is 與 is 的用法和區別,學習全域性與區域性註冊元件

  vue中 is用來動態切換元件，詳細請看示例：（順便講解父向子元件的傳遞資訊） html： <div id="app">   <!--         1.在這裡呼叫元件。   &

Vue.js開發常見問題

Vue.js由於其語法簡單,文件友好,而且是一個漸進式框架,因而得到了許多前端開發者的青睞.尤其對初學者而言,入門Vue.js比目前前端三大框架中的另外兩個都容易的多.但是同時,簡單並不意味著低階,把Vue.js弄會還是需要掌握不少東西的,尤其對於沒有接觸過webpack構建工具的初學者.

說說如何使用 Vue.js 開發購物車功能

購物車一般包含商品名稱、單價、數量等資訊，數量可以任意新增或減少，商品項也可刪除，還可以支援全選或多選： 我們把這個小專案分為三個檔案： index.html （頁面） index.js （Vue 指令碼） style.css （樣式） 1 inde

VsCode + node+ vue.js 開發環境搭建（一）

1.安裝最新的 vscode ,這個很容易安裝。 2.要在機器上開發 vue.js 有兩種模式，一種直接用 .js ,這種方式不用 安裝.node  環境，另一種用 webpack, 3.在機器安裝 node node-v10.8.0-x64.msi,在安裝過程中可能會出

使用WebStorm做Vue.js開發

最近Team用Sublime Text做Vue.js專案，Sublime Text用的不習慣。因為IntelliJ IDEA和Android Studio用的很順手，自然想到JETBRAINS的WebStorm。 WebStorm預設支援AngularJS React，Vu

vue.js 開發環境配置

1. node.js環境（npm包管理器） 下載： https://nodejs.org/en/download/current/ 下載解壓版的方便 新增path環境後執行 npm包管理器，是整合在node中的，所以安裝了node也就有了npm,直接輸入 npm -v 命令，顯示npm的版本資