资讯详情

Vue 前端打包并接入 Spring Boot 操作步骤

本文只记录操作步骤，适用于当前项目 CF-EVRS。

1. 打包前端

前端项目目录：

F:\IdeaProjectJava\CF-EVRS\vue_CF-EVRS

在该目录执行：

cd F:\IdeaProjectJava\CF-EVRS\vue_CF-EVRS
npm run build

执行完成后，会生成打包目录：

F:\IdeaProjectJava\CF-EVRS\vue_CF-EVRS\dist

2. 放到后端静态资源目录

后端静态资源目录：

F:\IdeaProjectJava\CF-EVRS\src\main\resources\static

操作要求：

1. 将 dist 目录中的内容复制到 static 目录中。
2. 复制的是 dist 里面的文件和子目录，不是把整个 dist 文件夹再套一层放进去。

复制完成后，目录结构应类似：

src\main\resources\static
├─ index.html
├─ favicon.ico
├─ css
├─ js
└─ fonts

3. 配置 SecurityConfig 放行前端页面和静态资源

配置文件位置：

F:\IdeaProjectJava\CF-EVRS\src\main\java\com\sys\config\SecurityConfig.java

在 configure(HttpSecurity http) 中，放行首页和静态资源访问。

可直接按下面这种方式配置：

@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {@Autowiredprivate JwtAuthenticationTokenFilter jwtAuthenticationTokenFilter;@Beanpublic BCryptPasswordEncoder passwordEncoder() {return new BCryptPasswordEncoder();}@Overrideprotected void configure(HttpSecurity http) throws Exception {http.csrf().disable().cors().and().sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS).and().authorizeRequests().antMatchers("/","/index.html","/favicon.ico","/css/**","/js/**","/fonts/**","/img/**").permitAll().antMatchers("/api/auth/**", "/api/user/**", "/profile/**", "/uploads/**").permitAll().anyRequest().authenticated().and().addFilterBefore(jwtAuthenticationTokenFilter, UsernamePasswordAuthenticationFilter.class);}
}

4. 启动后端

回到项目根目录执行：

cd F:\IdeaProjectJava\CF-EVRS
mvn spring-boot:run

或者直接在 IDEA 中启动 com.sys.Application。

启动成功后访问：

http://localhost:8089/

5. 操作顺序总结

固定顺序如下：

1. 前端执行 npm run build
2. 将 dist 内容复制到 src/main/resources/static
3. 配置 SecurityConfig 放行首页和静态资源
4. 启动后端