Spring Boot：引用js,css,jquery静态资源报错

小胖丨学编程

已于 2024-11-12 10:49:22 修改

阅读量6.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： SpringBoot eclipse使用文章标签： Spring Boot Bootstrap eclipse

于 2019-03-22 15:33:45 首次发布

本文链接：https://blog.youkuaiyun.com/qq_35764460/article/details/88742616

SpringBoot 同时被 2 个专栏收录

11 篇文章

订阅专栏

eclipse使用

4 篇文章

订阅专栏

本文介绍了在Spring Boot项目中引用Bootstrap的静态资源（css, js, jquery）时遇到的错误，包括MIME类型不匹配的问题。作者分享了错误的引用方式，即直接从网站上引用，以及第二天因网站问题导致的前台报错。为了解决这个问题，文章提供了将资源下载到本地并正确引用的方法，分别针对eclipse中的SSM项目和IDEA中的Spring Boot项目给出了详细步骤，并提到了在application.yml文件中进行配置的解决办法。" 120758595,11526262,SSM科研成果管理系统设计与实现,"['Java', 'Spring', 'SpringMVC', 'MyBatis', '数据库']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Spring Boot：引用js,css,jquery静态资源报错

报错背景

报错背景

最近一直在使用Bootstrap框架，可以快速在下面网页上搭建前端界面。ibootstrap
但是搭建完，需要引用css,js,以及jquery，这样效果才可以使用。

错误方法一

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.0.1/js/bootstrap.min.js"></script>

上面是我使用的方法，可以直接在网站上引用这些代码。

方法一报错

但是第二天，这方法突然没有了，并且前台报错

Refused to execute script from ‘https://cdn.bootcss.com/twitter-bootstrap/3.0.1/js/bootstrap.min.js’ because its MIME type (‘text/html’) is not executable, and strict MIME type checking is enabled.
css报错
网站上的用不了，那我下载换成本地的吧。

解决方法

倒腾了一早上，终于找到了解决方法，并且在Spring Boot 上的一些坑也解决了，希望你们可以得到帮助。

下面是eclipse里的SSM项目
在这里插入图片描述

WEB-INF里的Homepage.jsp 需要引用static 里的静态资源
在这里插入图片描述

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<%
	pageContext.setAttribute("APP_PATH",request.getContextPath());
%>
<script src="${APP_PATH }/static/js/jquery-3.3.1.min.js"></script>
<link href="${APP_PATH }/static/bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="${APP_PATH }/static/bootstrap-3.3.7/js/bootstrap.min.js"></script>
<title>主页</title>
</head>
<body>
</body>
</html>

你可以用这个方法引入。这里的travel是项目的名字。

<script src="/travel/static/js/jquery-3.3.1.min.js"></script>
<link href="/travel/static/bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="/travel/static/bootstrap-3.3.7/js/bootstrap.min.js"></script>

当然你也可以这样，加上项目的名字

IDEA中的Spring Boot 引用

下面是IDEA里的Spring Boot项目
在这里插入图片描述

解决办法

你可以用这个方法引入。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>买家商品列表</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css" />
    <link rel="stylesheet" href="/css/bootstrap-theme.min.css" />
    <script src="/js/bootstrap.min.js" type="javascript"></script>
</head>
<body>
</body>
</html>

在applocation.yml文件中添加

spring:
  mvc:
    static-path-pattern: /**