前端dist包放到后端springboot項(xiàng)目下一起打包圖文教程
最近做了一個小項(xiàng)目。很簡單的幾個頁面。
用的框架是若依前后端分離的,但是不想部署的時候還要前后端分開部署,要搭nginx等。
1.首先前端運(yùn)行 npm run build 打成dist包(具體的打包命令,看package.json文件中定義的語句)
2.找到后端項(xiàng)目的resource 目錄,我整個項(xiàng)目的jar包是生成在admin模塊下,此處可能不存在static文件夾,直接創(chuàng)建以一個,然后將dist里面的文件復(fù)制到static下(是里面,不包括dist)
3.直接點(diǎn)擊右側(cè)的package 打包后端項(xiàng)目,我的項(xiàng)目在pom文件中配置的是打成jar包
4.打包完成后,就會多出來一個target目錄,這里面就是打包完成的后端項(xiàng)目。
5.打開jar包看看文件是否打包進(jìn)去,可以看到之前的前端文件已經(jīng)加進(jìn)去了,
目錄在BOOT-INF\classes\static下
6.這時候,不需要再部署前端項(xiàng)目,運(yùn)行啟動后端的jar包,就可以訪問整個項(xiàng)目了。
(使用:nohup java -jar jar包名 >>test.log&
就能讓jar包在服務(wù)器上不掛斷后臺運(yùn)行,輸出的日志到test.log里)
我本地的后端項(xiàng)目使用的是8088端口,我的前端訪問路徑就是:后端路徑+index.html
如:http://localhost:8088/index.html
訪問成功了!(地址不是index.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),首頁的圖片等。如圖,兩個后綴為.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() // 過濾請求 .authorizeRequests() // 對于登錄login 注冊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() // 除上面外的所有請求全部需要鑒權(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下不會參與壓縮,assets下會被壓縮。如圖bgimg.png打包后名稱會變。但是引用的路徑打包后也會跟著變化,所以放在兩個文件夾下都可以。
前端的路由還要配置為hash模式,否則的話刷新會報錯。
如果放在其他路徑,打包后很容易產(chǎn)生錯誤,文件名稱被壓縮后訪問不到,路徑不對等問題,還是建議統(tǒng)一放在靜態(tài)資源文件夾下。
總結(jié)
到此這篇關(guān)于前端dist包放到后端springboot項(xiàng)目下一起打包的文章就介紹到這了,更多相關(guān)前端dist包后端springboot項(xiàng)目打包內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
詳談Java 異常處理的誤區(qū)和經(jīng)驗(yàn)總結(jié)(分享)
下面小編就為大家分享一篇Java 異常處理的誤區(qū)和經(jīng)驗(yàn)總結(jié),具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2017-12-12使用springcloud+oauth2攜帶token去請求其他服務(wù)
這篇文章主要介紹了使用springcloud+oauth2攜帶token去請求其他服務(wù)方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2021-08-08DUBBO 日志過濾器,輸出dubbo 接口調(diào)用入?yún)?、出參等信?最新推薦)
這篇文章主要介紹了DUBBO 日志過濾器,輸出dubbo 接口調(diào)用入?yún)?、出參等信?首先自定義一個過濾器?DubboLoggerFilter.java,本文結(jié)合示例代碼給大家講解的非常詳細(xì),需要的朋友可以參考下2022-12-12java 調(diào)用wsdl協(xié)議接口簡單實(shí)用方法最新推薦
文章介紹了如何使用POM導(dǎo)入依賴,并編寫一個測試類來調(diào)用不同的Web服務(wù)接口,通過訪問接口地址,我們可以獲取請求和返回的body,并進(jìn)一步解析返回的JSON結(jié)果,感興趣的朋友一起看看吧2025-03-03intellij idea旗艦版解決學(xué)生無法注冊問題詳解
這篇文章主要介紹了intellij idea旗艦版解決學(xué)生無法注冊問題詳解,文中通過圖文示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07