前端dist包放到后端springboot項目下一起打包圖文教程

更新時間：2025年01月10日 11:03:46 作者：夕陽的刻痕425

這篇文章主要介紹了前端dist包放到后端springboot項目下一起打包的相關(guān)資料,具體步驟包括前端打包、將前端文件復(fù)制到后端項目的static目錄、后端打包、驗證部署成功等,需要的朋友可以參考下

最近做了一個小項目。很簡單的幾個頁面。

用的框架是若依前后端分離的，但是不想部署的時候還要前后端分開部署，要搭nginx等。

1.首先前端運行 npm run build 打成dist包（具體的打包命令,看package.json文件中定義的語句）

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

3.直接點擊右側(cè)的package 打包后端項目，我的項目在pom文件中配置的是打成jar包

4.打包完成后，就會多出來一個target目錄，這里面就是打包完成的后端項目。

5.打開jar包看看文件是否打包進去，可以看到之前的前端文件已經(jīng)加進去了，

目錄在BOOT-INF\classes\static下

6.這時候，不需要再部署前端項目，運行啟動后端的jar包，就可以訪問整個項目了。

（使用：nohup java -jar jar包名 >>test.log&

就能讓jar包在服務(wù)器上不掛斷后臺運行，輸出的日志到test.log里）

我本地的后端項目使用的是8088端口，我的前端訪問路徑就是:后端路徑+index.html

如：http://localhost:8088/index.html

訪問成功了！（地址不是index.html是因為前端重定向到了登錄頁）

可以登錄進系統(tǒng)了。

這種方式部署，還有不少的問題，我圖片還有部分圖標路徑都有問題，還需要調(diào)整，總的來說前后端分離的項目，老老實實使用nginx分離部署比較好。

圖標，圖片的問題，如果后端做了攔截，需要配置放行，例如element-ui 的圖標，系統(tǒng)的圖標，首頁的圖片等。如圖，兩個后綴為.woff 和.ttf的文件就是打包生成的el圖標文件，需要配置放行。

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

代碼如下，根據(jù)自己需求配置：

    @Override
    protected void configure(HttpSecurity httpSecurity) throws Exception {
        // 注解標記允許匿名訪問的url
        ExpressionUrlAuthorizationConfigurer<HttpSecurity>.ExpressionInterceptUrlRegistry registry = httpSecurity.authorizeRequests();
        permitAllUrl.getUrls().forEach(url -> registry.antMatchers(url).permitAll());

        httpSecurity
                // CSRF禁用，因為不使用session
                .csrf().disable()
                // 認證失敗處理類
                .exceptionHandling().authenticationEntryPoint(unauthorizedHandler).and()
                // 基于token，所以不需要session
                .sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS).and()
                // 過濾請求
                .authorizeRequests()
                // 對于登錄login 注冊register 驗證碼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)認證
                .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);
    }

這樣的話前端的圖標以及圖片就可以正常訪問了。