Spring MVC 不会将 css、js 文件加载到静态 html 页面

Posted 2023-02-26

技术标签:

【中文标题】Spring MVC 不会将 css、js 文件加载到静态 html 页面【英文标题】：Spring MVC doesn't load css, js files to static html pages 【发布时间】：2017-06-24 14:46:45 【问题描述】：

我禁用了 InternalViewResolver 的角色以访问一些静态页面，html 不是 jsp 页面，我进行了所需的更改，确实我做了，我可以访问我的 html 页面，但是当我看到浏览器的控制台时，它看起来好像没有带上我的本地 css 和 js 文件。

这是我的项目结构。

这是我的首页

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>ECommerce view example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
    <link rel="stylesheet"
        href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script
        src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/static/css/style.css"/>
    <link rel="stylesheet" type="text/css" href="/static/css/login.css"/>
    <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBR8P_sULnn-egsyhOb6qLYG2oqFshTiwY"></script>
</head>

mvc-config.xml

<?xml version="1.0" encoding="UTF-8"?>
    <beans:beans xmlns="http://www.springframework.org/schema/mvc"
        xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xmlns:beans="http://www.springframework.org/schema/beans"
        xmlns:context="http://www.springframework.org/schema/context"
        xsi:schemaLocation="http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd
            http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
            http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd">

        <annotation-driven></annotation-driven>
        <context:annotation-config></context:annotation-config>
        <context:component-scan base-package="ma.s2m.net"></context:component-scan>         
        <resources mapping="/static/**" location="/WEB-INF/static/"></resources>
    </beans:beans>

【问题讨论】：

【参考方案1】：

刚刚注意到从 href 属性中删除 / 将解决此问题。

请尝试更改

<link rel="stylesheet" type="text/css" href="/static/css/login.css"/>

到

<link rel="stylesheet" type="text/css" href="static/css/login.css"/>

希望能帮到你。

【讨论】：

【参考方案2】：

从浏览器控制台看来，您的路径无效。

<link rel="stylesheet" type="text/css" href="/static/css/style.css"/>

解析为网址： http://localhost:8080/static/css/style.css。

此处缺少 URL 中的上下文根。理想情况下，URL 应该是这样的。 http://localhost:8080/<CONTEXT_ROOT>/static/css/style.css

在您的情况下，由于这是静态 html 页面，因此只需进行一次更正即可将 URI 与 webapp 目录匹配。

在entry.html 中进行以下更改即可。

<link rel="stylesheet" type="text/css" href="../static/css/style.css"/> <link rel="stylesheet" type="text/css" href="../static/css/login.css"/>

希望它能解决你的错误。

【讨论】：

它不起作用，我不知道它是如此模棱两可，我尝试了mvc-config .xml和entry.html css位置之间的所有可能组合。你能不能再把浏览器控制台快照粘贴到这里。这是更新 <link rel="stylesheet" type="text/css" href="../css/style.css"/>，这是控制台快照 http://localhost:8080/ssytem-ecommerce-prototype-view/css/style.css 404 not found 你能试试这条线吗？如果可行，我将修改答案。 <link rel="stylesheet" type="text/css" href="../static/css/style.css"/> http://localhost:8080/ssytem-ecommerce-prototype-view/css/login.css 404 not found，好像不认根路径【参考方案3】：

我们一般把css,js放在resource文件夹里面，层级如下：

webapp
  resource
    static
      css
        style.css
      js
        ...
  WEB-INF
    ...

尝试使用上述层次结构。将资源映射更改为

<resources mapping="/resources/**" location="/resources/static/"></resources>.

【讨论】：

它在整个页面上返回404 not found，而不仅仅是资源。【参考方案4】：

你必须使用标签来解析你的静态 css & js。可以参考How to handle static content in Spring MVC?

【讨论】：

它不会改变任何东西。我想要一个没有助手的访问，什么都没有，没有 jstl，什么都没有。就像我们在 Spring Boot 应用程序中所做的一样。您的样式表链接将解析为 webapp/static/css/ 目录。由于该目录中不存在文件，因此您会收到 404 错误。如果您使用的是资源标签，那么您需要借助 JSTL 或 spring 标签。另一种选择是忽略资源标签并给出我们在静态 html 页面中给出的路径。为此，您的所有文件都应位于 webapp 目录下，因为 WEB-INF 文件夹下的文件是安全的，浏览器客户端无法直接访问。它没有用，我采用了第二个选项，我替换了 webapp 文件夹下的资源，这是链接尝试将静态文件夹的全部内容与 webapp 目录下的 entry.html 文件一起移动并使用还是没有，我照你说的做了

以上是关于Spring MVC 不会将 css、js 文件加载到静态 html 页面的主要内容，如果未能解决你的问题，请参考以下文章

spring mvc 访问不到 js css

Spring MVC程序中怎么得到静态资源文件css,js,图片文件的路径问题

在Spring MVC中管理HTML资源（CSS，JS文件）

如何使用 Spring MVC 在 JSP 中包含 js 和 CSS

spring mvc访问静态资源的问题, .js .jpg .css

请问：为啥配置Spring MVC的DispatcherServlet的url-pattern为/能访问JSP，而不能访问JS、CSS文件？