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

 更新时间:2025年01月10日 11:03:46   作者:夕阳的刻痕425  
这篇文章主要介绍了前端dist包放到后端springboot项目下一起打包的相关资料,具体步骤包括前端打包、将前端文件复制到后端项目的static目录、后端打包、验证部署成功等,需要的朋友可以参考下

最近做了一个小项目。很简单的几个页面。

用的框架是若依前后端分离的,但是不想部署的时候还要前后端分开部署,要搭nginx等。

1.首先前端运行 npm run build 打成dist包(具体的打包命令,看package.json文件中定义的语句)

2.找到后端项目的resource 目录,我整个项目的jar包是生成在admin模块下,此处可能不存在static文件夹,直接创建以一个,然后将dist里面的文件复制到static下(是里面,不包括dist)

3.直接点击右侧的package 打包后端项目,我的项目在pom文件中配置的是打成jar包

4.打包完成后,就会多出来一个target目录,这里面就是打包完成的后端项目。

5.打开jar包看看文件是否打包进去,可以看到之前的前端文件已经加进去了,

目录在BOOT-INF\classes\static下

6.这时候,不需要再部署前端项目,运行启动后端的jar包,就可以访问整个项目了。

(使用:nohup java -jar jar包名 >>test.log&

就能让jar包在服务器上不挂断后台运行,输出的日志到test.log里)

我本地的后端项目使用的是8088端口,我的前端访问路径就是:后端路径+index.html

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

访问成功了!(地址不是index.html是因为前端重定向到了登录页)

可以登录进系统了。

这种方式部署,还有不少的问题,我图片还有部分图标路径都有问题,还需要调整,总的来说前后端分离的项目,老老实实使用nginx分离部署比较好。

图标,图片的问题,如果后端做了拦截,需要配置放行,例如element-ui 的图标,系统的图标,首页的图片等。如图,两个后缀为.woff 和.ttf的文件就是打包生成的el图标文件,需要配置放行。

在WebSecurityConfigurerAdapter的子类实现中,将这些文件放行。

代码如下,根据自己需求配置:

    @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()
                // 静态资源,可匿名访问
                .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()
                // 除上面外的所有请求全部需要鉴权认证
                .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);
    }

这样的话前端的图标以及图片就可以正常访问了。

前端的静态文件放置位置,public下不会参与压缩,assets下会被压缩。如图bgimg.png打包后名称会变。但是引用的路径打包后也会跟着变化,所以放在两个文件夹下都可以。

前端的路由还要配置为hash模式,否则的话刷新会报错。

如果放在其他路径,打包后很容易产生错误,文件名称被压缩后访问不到,路径不对等问题,还是建议统一放在静态资源文件夹下。

总结

到此这篇关于前端dist包放到后端springboot项目下一起打包的文章就介绍到这了,更多相关前端dist包后端springboot项目打包内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:

相关文章

  • Java反射机制的简单讲解

    Java反射机制的简单讲解

    这篇文章主要介绍了Java反射机制的简单讲解,本文讲解了Java的高级概念反射机制,通过文字介绍案例该项概念和代码的详细展示,需要的朋友可以参考下
    2021-07-07
  • 详谈Java 异常处理的误区和经验总结(分享)

    详谈Java 异常处理的误区和经验总结(分享)

    下面小编就为大家分享一篇Java 异常处理的误区和经验总结,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2017-12-12
  • Java中集合关系图及常见操作详解

    Java中集合关系图及常见操作详解

    这篇文章主要为大家详细介绍了Java中集合关系图及常见操作,解析Java中的集合类型的继承关系图,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-11-11
  • Maven解决jar包版本冲突的4种方法详解

    Maven解决jar包版本冲突的4种方法详解

    这篇文章主要给大家介绍了关于Maven解决jar包版本冲突的4种方法代码,maven工程要导入jar包的坐标,就必须要考虑解决jar包冲突,文中介绍的非常详细,需要的朋友可以参考下
    2023-07-07
  • 使用springcloud+oauth2携带token去请求其他服务

    使用springcloud+oauth2携带token去请求其他服务

    这篇文章主要介绍了使用springcloud+oauth2携带token去请求其他服务方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2021-08-08
  • DUBBO 日志过滤器,输出dubbo 接口调用入参、出参等信息(最新推荐)

    DUBBO 日志过滤器,输出dubbo 接口调用入参、出参等信息(最新推荐)

    这篇文章主要介绍了DUBBO 日志过滤器,输出dubbo 接口调用入参、出参等信息,首先自定义一个过滤器 DubboLoggerFilter.java,本文结合示例代码给大家讲解的非常详细,需要的朋友可以参考下
    2022-12-12
  • java 调用wsdl协议接口简单实用方法最新推荐

    java 调用wsdl协议接口简单实用方法最新推荐

    文章介绍了如何使用POM导入依赖,并编写一个测试类来调用不同的Web服务接口,通过访问接口地址,我们可以获取请求和返回的body,并进一步解析返回的JSON结果,感兴趣的朋友一起看看吧
    2025-03-03
  • java中表示一个文件的File类型详解

    java中表示一个文件的File类型详解

    Java提供File类,让我们对文件进行操作,下面这篇文章主要给大家介绍了关于java中表示一个文件的File类型的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考借鉴,下面随着小编来一起学习学习吧
    2018-07-07
  • Java实现五子棋游戏(控制台版)

    Java实现五子棋游戏(控制台版)

    这篇文章主要为大家详细介绍了Java控制台版实现五子棋游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-10-10
  • intellij idea旗舰版解决学生无法注册问题详解

    intellij idea旗舰版解决学生无法注册问题详解

    这篇文章主要介绍了intellij idea旗舰版解决学生无法注册问题详解,文中通过图文示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07

最新评论