Spring Boot配置静态SPA遇404/白屏，附配置求解决方案

开发混合SPA应用，采用Spring Boot作为后端（默认静态资源路径配置），SPA应用部署路径为/s。遇到以下问题：

• 访问http://localhost:8080/s/时返回404错误
• 访问http://localhost:8080/s/index.html时页面白屏，应用无法加载
  项目已集成Spring Security，补充配置代码如下：

ViewConfig配置 #

@Configuration
public class ViewConfig implements WebMvcConfigurer {

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {

        registry.setOrder(999)
                .addResourceHandler("/s/**")
                .addResourceLocations("classpath:/static/s/")
                .setCacheControl(CacheControl.noCache())
                .setCachePeriod(0);
    }

    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        registry.addViewController("/s").setViewName("redirect:/s/");
        registry.addViewController("/s/").setViewName("forward:/s/index.html");
    }
}

Spring Security配置 #

@Configuration
@EnableWebSecurity
public class SecurityConfig {

    @Bean
    public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
        http
                .authorizeRequests()
                .antMatchers("/client.css", "/client.js").permitAll()
                .anyRequest().authenticated()
                .and()
                .formLogin(Customizer.withDefaults())
                .httpBasic();


        return http.build();
    }

    @Bean
    public PasswordEncoder passwordEncoder() {
        return new BCryptPasswordEncoder();
    }

    @Autowired
    protected void configureAuth(final AuthenticationManagerBuilder auth) throws Exception {

    }
}

1. Spring Security 静态资源权限缺失 #

当前Security配置仅放行根路径下的/client.css和/client.js，但SPA部署在/s路径下，其依赖的所有静态资源（如/s/index.js、/s/assets/**等）都会被Spring Security拦截，导致页面无法加载资源而白屏。

修改方案：
在SecurityConfig的antMatchers中添加对/s路径下所有静态资源的放行规则：

@Bean
public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
    http
            .authorizeRequests()
            // 放行SPA路径下的所有静态资源及入口页面
            .antMatchers("/s/**").permitAll()
            .antMatchers("/client.css", "/client.js").permitAll()
            .anyRequest().authenticated()
            .and()
            .formLogin(Customizer.withDefaults())
            .httpBasic();

    return http.build();
}

如果需要保护SPA的路由权限，可仅放行静态资源文件：

.antMatchers("/s/index.html", "/s/*.js", "/s/*.css", "/s/assets/**").permitAll()

2. Vite + Svelte 打包base路径配置错误 #

SPA部署在/s子路径下，若Vite未配置正确的base路径，打包后静态资源会请求根路径（如/client.js），而非/s/client.js，导致资源404，页面白屏。

修改方案：
在Vite配置文件（vite.config.js或vite.config.ts）中设置base为'/s/'：

import { defineConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';

export default defineConfig({
  plugins: [svelte()],
  base: '/s/' // 配置SPA的基础路径
});

重新打包后将静态资源放入Spring Boot的src/main/resources/static/s/目录下。

3. 路由转发验证 #

当前ViewConfig中的转发规则基本正确，但需确保/s/转发到/s/index.html时，该文件确实存在于classpath:/static/s/目录下。若仍存在404问题，可检查资源处理器的优先级，将registry.setOrder(999)调整为更低数值（如1），确保该资源处理器优先生效。

内容的提问来源于stack exchange，提问作者dhaanpaa-lab0