Spring无法识别样式、字体及jQuery资源，页面显示异常求助

Hey there! Let's work through why your Spring app isn't loading those static styles and scripts properly—this is a super common hiccup, so we'll get it sorted out. Here are the key fixes to try:

1. Explicitly Configure Static Resource Mapping #

Spring has default locations for static files (src/main/resources/static, src/main/resources/public, etc.), but sometimes you need to explicitly tell it to serve these resources. Create a configuration class that implements WebMvcConfigurer:

@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/static/**")
                .addResourceLocations("classpath:/static/");
    }
}

This code maps any URL starting with /static/ directly to your src/main/resources/static directory—making sure Spring knows where to find your files.

2. Fix Your Resource Path References #

Your current relative paths (../static/...) can break if your page is served from a subpath. Switch to absolute paths instead:

Updated HTML Code: #

<!-- Style sheets -->
<link href="/static/style/styleDistance.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Lato:400,700&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link href="/static/css/fontello.css" rel="stylesheet" type="text/css" />

<!-- jQuery script (adjust path if your file is in a different subfolder) -->
<script src="/static/js/jquery-1.11.3.min.js"></script>

If you're using a template engine like Thymeleaf, use its built-in URL syntax to avoid path confusion:

<link th:href="@{/static/style/styleDistance.css}" rel="stylesheet" type="text/css" />
<script th:src="@{/static/js/jquery-1.11.3.min.js}"></script>

3. Double-Check Your Directory Structure #

Make sure your files are in the correct location under src/main/resources/. It should look like this:

src/
└── main/
    └── resources/
        └── static/
            ├── style/
            │   └── styleDistance.css
            ├── css/
            │   └── fontello.css
            └── js/
                └── jquery-1.11.3.min.js

If your files are stored in webapp instead of resources/static, adjust the resource handler configuration to point to file:src/main/webapp/static/ instead.

4. Clear Browser Cache #

Old cached resources can make it seem like your styles aren't loading. Try a hard refresh (Ctrl + F5 on Windows/Linux, Cmd + Shift + R on Mac) or clear your browser's cache entirely to rule this out.

Give these steps a shot—chances are it's either a mapping misconfiguration or an incorrect path reference. Let me know if you still hit snags!

内容的提问来源于stack exchange，提问作者Konrad Krawczyk