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

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

用的框架是若依前后端分离的，但是不想部署的时候还要前后端分开部署，要搭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);
    }

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