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
操作要求：
- 将
dist目录中的内容复制到static目录中。 - 复制的是
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. 操作顺序总结
固定顺序如下：
- 前端执行
npm run build - 将
dist内容复制到src/main/resources/static - 配置
SecurityConfig放行首页和静态资源 - 启动后端