摘要:最近使用開發了一款應用,這里主要記錄開發調試打包的過程及做法。調用中的命令構建。可以通過命令啟動。至此基礎配置就差不多是這樣打包發布就可以直接通過。發布時我們無需修改任何配置及代碼,與開發環境是一致。
最近使用springboot, vue, webpack開發了一款SPA應用,這里主要記錄開發+調試+打包的過程及做法。
使用的技術
gradle
springboot
vue.js
webpack
下面是開發時的項目結構目錄,主要分成后端項目與前端項目,后端主要用于編寫服務器邏輯,前端則是編寫頁面和存放靜態資源。
-- springboot-vue-webpack-examples | |-- server | | | |-- src // 源碼 | |-- build // 構建輸出目錄 | |-- ui | | | |-- build-scripts // vue 構建腳本 | |-- config // vue 配置文件 | |-- src // 源碼 | |-- static // 靜態資源 | |-- build // 構建輸出目錄
ui項目通過vue init webpack ui命令創建使用的是vue提供的模板,之所以使用該模板因為里面已經配置好了調試與生產打包方式,我們不需要做什么更改就可以直接使用。
默認在vue的模板中構建腳本是放置在build目錄中,這里將構建腳本移置build-scripts目錄中,主要是因為gradle的默認構建輸出目錄是build為了減少配置而修改了vue構建腳本的目錄,我感覺這是最簡單方便的,因為比如我們在使用代碼版本控制器的時候build目錄會被忽略而不提交至服務器,我不想去修改太多的配置。將vue構建腳本移動后需要修改幾個點,如下圖
ui項目的gradle腳本配置,最終我們打包發布都是直接通過gradle命令,所以需要將node構建集成到gradle中。
project(":ui") { apply plugin: "com.moowork.node" task cnpmInstall(type: NpmTask) { group = "node" args = ["install", "--registry=http://registry.cnpmjs.org"] } task buildUI(type: NpmTask, dependsOn: cnpmInstall) { group = "node" args = ["run", "build"] } jar.dependsOn buildUI task runDev(type: NpmTask, dependsOn: cnpmInstall) { group = "node" args = ["run", "dev"] } }
cnpmInstall 該命令主要用于依賴安裝,之所以需要這個命令主要是因為我們的網絡環境不太好,將鏡像設置為國內的下載依賴比較穩定。
buildUI 調用package.json中的命令構建ui。
runDev 可以通過gradlew :ui:runDev命令啟動ui。
ui/config/index.js 配置修改
// see http://vuejs-templates.github.io/webpack for documentation. var path = require("path") var assetsRoot = path.resolve(__dirname, "../build/resources/main/ui") module.exports = { build: { env: require("./prod.env"), index: path.resolve(assetsRoot, "index.html"), assetsRoot: assetsRoot, assetsSubDirectory: "static", 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"] }, dev: { env: require("./dev.env"), port: 3000, assetsSubDirectory: "static", assetsPublicPath: "/", proxyTable: { "/api/**": "http://localhost:8080" }, // 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 } }
assetsRoot 將webpack構建的資源輸出至build/resources/main/ui目錄,gradle打包會將ui加入至classpath中,spring查找靜態資源有ui目錄區分比較方便。
proxyTable 增加代理配置將/api/** URL下的所有請求轉發至服務后端即springboot啟動的服務,這樣做的目的是為了方便debug,在vue webpack中已經配置好了hot-dev,在開發中我們修改了前端js或者vue不需要重新構建或重啟應用前端就能響應。所以在開發中我們啟動服務后的訪問入口是
http://localhost:3000
其實3000是express dev-server的端口,這里也體現了上面為什么要配置proxyTable,當我們從dev-server作為訪問入口時與后端服務并不是同一個,存在跨域問題,但是通過代理可以避免這個問題,同時這并不會對生產環境造成影響,當我們發布項目之后可以直接通過springboot服務作為訪問入口,因為在生產環境中我們不需要hot-reload功能。
服務端WEB配置
@Configuration @RestController public class WebConfiguration extends WebMvcConfigurerAdapter { @Value("classpath:/ui/index.html") private Resource indexHtml; @Bean @Order(Ordered.HIGHEST_PRECEDENCE) public CharacterEncodingFilter characterEncodingFilter() { CharacterEncodingFilter filter = new CharacterEncodingFilter("UTF-8", true); return filter; } @Override public void addResourceHandlers(ResourceHandlerRegistry registry) { registry.addResourceHandler("/**").addResourceLocations("classpath:/ui/"); } @Bean public ServletRegistrationBean apiV1ServletBean(WebApplicationContext wac) { DispatcherServlet servlet = new DispatcherServlet(wac); ServletRegistrationBean bean = new ServletRegistrationBean(servlet, "/api/v1/*"); bean.setName("api-v1"); return bean; } @RequestMapping("/") public Object index() { return ResponseEntity.ok().body(indexHtml); } }
addResourceHandlers 增加靜態資源訪問路徑。
apiV1ServletBean 之所以增加一個servlet配置,是為了與靜態資源區分,后端服務都是通過restful接口交互而靜態資源是通過/根目錄的方式訪問。
index 根目錄返回index.html。
至此基礎配置就差不多是這樣打包發布就可以直接通過gradlew build。發布時我們無需修改任何配置及代碼,與開發環境是一致。而在開發環境中我們也保留良好的開發,及調試環境。
注:運行時不需要nodejs環境
示例代碼:springboot-vue-webpack-examples
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/66055.html
摘要:本項目將使用配合最簡單的邏輯來展示一個基于的微服務全棧快速開發實踐的。提供一系列大型項目常用的非功能性特征,比如內嵌服務器,安全,指標,健康檢測,外部化配置。 SprintBoot-Vue SpringBoot + 前端MVVM 基于Java的微服務全棧快速開發實踐 showImg(https://segmentfault.com/img/remote/1460000010167913...
摘要:本項目將使用配合最簡單的邏輯來展示一個基于的微服務全棧快速開發實踐的。提供一系列大型項目常用的非功能性特征,比如內嵌服務器,安全,指標,健康檢測,外部化配置。 SprintBoot-Vue SpringBoot + 前端MVVM 基于Java的微服務全棧快速開發實踐 showImg(https://segmentfault.com/img/remote/1460000010167913...
摘要:是什么是構建工具特點構建任何應用自動化一切提供更快的構建上面的三項全是官方解釋對于第點沒有任何疑問,可以構建任何應用。 閱讀本文你需要一些 gradle/groovy 的基本知識,本文所講的內容全是利用各種插件去讓自身的應用構建發布更簡單,不會涉及到基礎知識 在 2016 年時我寫過一個示例《springboot+gradle+vue+webpack 組合使用》,經過了1年多我發現很...
摘要:前言體系中很多庫之間相互依賴,但是由于版本之間差異比較大,我們需要比較精確的知道每個庫的版本對應關系,不然很容易造成庫與庫之間對應不上,導致部分功能無效,甚至是異常情況。 前言:Spring體系中很多庫之間相互依賴,但是由于版本之間差異比較大,我們需要比較精確的知道每個庫的版本對應關系,不然很容易造成庫與庫之間對應不上,導致部分功能無效,甚至是異常情況。程序員排查起來一個頭兩個大,本篇...
摘要:一從零開始環境搭建對于之前的框架的使用,各種配置文件一旦出錯之后錯誤難尋,這也是為什么被推上主流的原因,的配置簡單,說分鐘能從框架的搭建到運行也不為過現在更是微服務當道,所以在此總結下的一些知識,新手教程是一個基于和概念的項目自動化構建開源 SpringBoot2.x【一】從零開始環境搭建 對于之前的Spring框架的使用,各種配置文件XML、properties一旦出錯之后錯誤難尋,...
閱讀 2679·2023-04-25 20:28
閱讀 1849·2021-11-22 09:34
閱讀 3687·2021-09-26 10:20
閱讀 1834·2021-09-22 16:05
閱讀 3085·2021-09-09 09:32
閱讀 2502·2021-08-31 09:40
閱讀 2101·2019-08-30 13:56
閱讀 3320·2019-08-29 17:01