前端dist包放到后端springboot項(xiàng)目下一起打包圖文教程
最近做了一個(gè)小項(xiàng)目。很簡(jiǎn)單的幾個(gè)頁面。
用的框架是若依前后端分離的,但是不想部署的時(shí)候還要前后端分開部署,要搭nginx等。
1.首先前端運(yùn)行 npm run build 打成dist包(具體的打包命令,看package.json文件中定義的語句)


2.找到后端項(xiàng)目的resource 目錄,我整個(gè)項(xiàng)目的jar包是生成在admin模塊下,此處可能不存在static文件夾,直接創(chuàng)建以一個(gè),然后將dist里面的文件復(fù)制到static下(是里面,不包括dist)

3.直接點(diǎn)擊右側(cè)的package 打包后端項(xiàng)目,我的項(xiàng)目在pom文件中配置的是打成jar包

4.打包完成后,就會(huì)多出來一個(gè)target目錄,這里面就是打包完成的后端項(xiàng)目。

5.打開jar包看看文件是否打包進(jìn)去,可以看到之前的前端文件已經(jīng)加進(jìn)去了,
目錄在BOOT-INF\classes\static下

6.這時(shí)候,不需要再部署前端項(xiàng)目,運(yùn)行啟動(dòng)后端的jar包,就可以訪問整個(gè)項(xiàng)目了。
(使用:nohup java -jar jar包名 >>test.log&
就能讓jar包在服務(wù)器上不掛斷后臺(tái)運(yùn)行,輸出的日志到test.log里)
我本地的后端項(xiàng)目使用的是8088端口,我的前端訪問路徑就是:后端路徑+index.html
如:http://localhost:8088/index.html

訪問成功了?。ǖ刂凡皇莍ndex.html是因?yàn)榍岸酥囟ㄏ虻搅说卿涰摚?/p>

可以登錄進(jìn)系統(tǒng)了。
這種方式部署,還有不少的問題,我圖片還有部分圖標(biāo)路徑都有問題,還需要調(diào)整,總的來說前后端分離的項(xiàng)目,老老實(shí)實(shí)使用nginx分離部署比較好。
圖標(biāo),圖片的問題,如果后端做了攔截,需要配置放行,例如element-ui 的圖標(biāo),系統(tǒng)的圖標(biāo),首頁的圖片等。如圖,兩個(gè)后綴為.woff 和.ttf的文件就是打包生成的el圖標(biāo)文件,需要配置放行。

在WebSecurityConfigurerAdapter的子類實(shí)現(xiàn)中,將這些文件放行。

代碼如下,根據(jù)自己需求配置:
@Override
protected void configure(HttpSecurity httpSecurity) throws Exception {
// 注解標(biāo)記允許匿名訪問的url
ExpressionUrlAuthorizationConfigurer<HttpSecurity>.ExpressionInterceptUrlRegistry registry = httpSecurity.authorizeRequests();
permitAllUrl.getUrls().forEach(url -> registry.antMatchers(url).permitAll());
httpSecurity
// CSRF禁用,因?yàn)椴皇褂胹ession
.csrf().disable()
// 認(rèn)證失敗處理類
.exceptionHandling().authenticationEntryPoint(unauthorizedHandler).and()
// 基于token,所以不需要session
.sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS).and()
// 過濾請(qǐng)求
.authorizeRequests()
// 對(duì)于登錄login 注冊(cè)register 驗(yàn)證碼captchaImage 允許匿名訪問
.antMatchers("/login", "/register", "/captchaImage").anonymous()
// 靜態(tài)資源,可匿名訪問
.antMatchers(HttpMethod.GET, "/", "/*.html", "/**/*.html", "/**/*.css", "/**/*.js","/**/*.png","/**/*.jpg","/**/*.ttf","/**/*.woff").permitAll()
.antMatchers(sysConfig.getUrls()).permitAll()
.antMatchers("/swagger-ui.html", "/swagger-resources/**", "/webjars/**", "/*/api-docs", "/druid/**").permitAll()
.antMatchers("/websocket/**").permitAll()
// 除上面外的所有請(qǐng)求全部需要鑒權(quán)認(rèn)證
.anyRequest().authenticated()
.and()
.headers().frameOptions().disable();
// 添加Logout filter
httpSecurity.logout().logoutUrl("/logout").logoutSuccessHandler(logoutSuccessHandler);
// 添加JWT filter
httpSecurity.addFilterBefore(authenticationTokenFilter, UsernamePasswordAuthenticationFilter.class);
// 添加CORS filter
httpSecurity.addFilterBefore(corsFilter, JwtAuthenticationTokenFilter.class);
httpSecurity.addFilterBefore(corsFilter, LogoutFilter.class);
}這樣的話前端的圖標(biāo)以及圖片就可以正常訪問了。

前端的靜態(tài)文件放置位置,public下不會(huì)參與壓縮,assets下會(huì)被壓縮。如圖bgimg.png打包后名稱會(huì)變。但是引用的路徑打包后也會(huì)跟著變化,所以放在兩個(gè)文件夾下都可以。



前端的路由還要配置為hash模式,否則的話刷新會(huì)報(bào)錯(cuò)。

如果放在其他路徑,打包后很容易產(chǎn)生錯(cuò)誤,文件名稱被壓縮后訪問不到,路徑不對(duì)等問題,還是建議統(tǒng)一放在靜態(tài)資源文件夾下。
總結(jié)
到此這篇關(guān)于前端dist包放到后端springboot項(xiàng)目下一起打包的文章就介紹到這了,更多相關(guān)前端dist包后端springboot項(xiàng)目打包內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
SpringCloud微服務(wù)基礎(chǔ)簡(jiǎn)介
今天帶大家學(xué)習(xí)一下SpringCloud微服務(wù)的相關(guān)知識(shí),文中有非常詳細(xì)的圖文示例及介紹,對(duì)正在學(xué)習(xí)SpringCloud微服務(wù)的小伙伴們很有幫助哦,需要的朋友可以參考下2021-05-05
java對(duì)象list使用stream根據(jù)某一個(gè)屬性轉(zhuǎn)換成map的3種方式舉例
開發(fā)小伙伴們通常會(huì)需要使用到對(duì)象和Map互相轉(zhuǎn)換的開發(fā)場(chǎng)景,下面這篇文章主要給大家介紹了關(guān)于java對(duì)象list使用stream根據(jù)某一個(gè)屬性轉(zhuǎn)換成map的3種方式,需要的朋友可以參考下2024-01-01
springboot使用單元測(cè)試實(shí)戰(zhàn)
這篇文章主要介紹了springboot使用單元測(cè)試實(shí)戰(zhàn),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09
Java實(shí)現(xiàn)復(fù)原IP地址的方法
這篇文章主要介紹了Java實(shí)現(xiàn)復(fù)原IP地址的方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
全解史上最快的JOSN解析庫(kù)alibaba Fastjson
這篇文章主要介紹了史上最快的JOSN解析庫(kù)alibaba Fastjson,對(duì)FastJson感興趣的同學(xué),一定要看一下2021-04-04
關(guān)于application.yml數(shù)據(jù)庫(kù)配置方式
這篇文章主要介紹了關(guān)于application.yml數(shù)據(jù)庫(kù)配置方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08

