前端的dist包放到后端springboot项目下一起打包

近来做了一个小项目。很简单的几个页面。
用的框架是若依前后端分离的，但是不想摆设的时候还要前后端分开摆设，要搭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的子类实现中，将这些文件放行。

代码如下，根据自己需求设置：

1.     @Override
2.     protected void configure(HttpSecurity httpSecurity) throws Exception {
3.         // 注解标记允许匿名访问的url
4.         ExpressionUrlAuthorizationConfigurer<HttpSecurity>.ExpressionInterceptUrlRegistry registry = httpSecurity.authorizeRequests();
5.         permitAllUrl.getUrls().forEach(url -> registry.antMatchers(url).permitAll());
7.         httpSecurity
8.                 // CSRF禁用，因为不使用session
9.                 .csrf().disable()
10.                 // 认证失败处理类
11.                 .exceptionHandling().authenticationEntryPoint(unauthorizedHandler).and()
12.                 // 基于token，所以不需要session
13.                 .sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS).and()
14.                 // 过滤请求
15.                 .authorizeRequests()
16.                 // 对于登录login 注册register 验证码captchaImage 允许匿名访问
17.                 .antMatchers("/login", "/register", "/captchaImage").anonymous()
18.                 // 静态资源，可匿名访问
19.                 .antMatchers(HttpMethod.GET, "/", "/*.html", "/**/*.html", "/**/*.css", "/**/*.js","/**/*.png","/**/*.jpg","/**/*.ttf","/**/*.woff").permitAll()
20.                 .antMatchers(sysConfig.getUrls()).permitAll()
21.                 .antMatchers("/swagger-ui.html", "/swagger-resources/**", "/webjars/**", "/*/api-docs", "/druid/**").permitAll()
22.                 .antMatchers("/websocket/**").permitAll()
23.                 // 除上面外的所有请求全部需要鉴权认证
24.                 .anyRequest().authenticated()
25.                 .and()
26.                 .headers().frameOptions().disable();
27.         // 添加Logout filter
28.         httpSecurity.logout().logoutUrl("/logout").logoutSuccessHandler(logoutSuccessHandler);
29.         // 添加JWT filter
30.         httpSecurity.addFilterBefore(authenticationTokenFilter, UsernamePasswordAuthenticationFilter.class);
31.         // 添加CORS filter
32.         httpSecurity.addFilterBefore(corsFilter, JwtAuthenticationTokenFilter.class);
33.         httpSecurity.addFilterBefore(corsFilter, LogoutFilter.class);
34.     }

复制代码

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

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

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

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。