将.js，.css文件提供给html模板的弹簧引导404错误

问题描述：

我使用的是spring引导并试图托管使用角度js的HTML页面。我的文件夹结构是：将.js，.css文件提供给html模板的弹簧引导404错误

我提到了很多关于SO的其他问题，甚至spring.io指南在spring启动时，我的理解是我们应该将我们的html模板保留在templates文件夹中， .css，图像，.js文件在静态文件夹中。我也做了同样的事情，但是每当页面加载时，只有html被渲染，浏览器会获得所有.css和.js文件的404。

我包括我以下列方式HTML .css和.js文件：

<script src="/js/socket.io/socket.io.js"></script> 
<script src="/js/moment.min.js"></script> 
<script src="/js/demoApp.js"></script>

我试着像所有的组合： SRC =” ../静态/ JS/socket.io /插座.io.js“或src =”js/socket.io/socket.io.js“ 但我总是在浏览器中获取这些文件的404。

我查春启动日志，这是它说：

2016-07-24 21:08:05 WARN PageNotFound:1139 - No mapping found for HTTP request with URI [/js/demoApp.js] in DispatcherServlet with name 'dispatcherServlet' 
2016-07-24 21:08:05 DEBUG DispatcherServlet:997 - Successfully completed request

我无法理解如何解决这一问题，请帮助！

注意：我没有写解析器代码，因为根据我的理解，spring boot会自动从静态文件夹中提取静态内容。如果我错了，请纠正我。

编辑：添加我的POM文件：

<parent> 
     <groupId>org.springframework.boot</groupId> 
     <artifactId>spring-boot-starter-parent</artifactId> 
     <version>1.3.5.RELEASE</version> 
    </parent> 
    <dependencies> 
     <dependency> 
      <groupId>org.springframework.boot</groupId> 
      <artifactId>spring-boot-starter-web</artifactId> 
      <exclusions> 
       <exclusion> 
        <groupId>org.springframework.boot</groupId> 
        <artifactId>spring-boot-starter-logging</artifactId> 
       </exclusion> 
      </exclusions> 
     </dependency> 
     <dependency> 
      <groupId>org.springframework.boot</groupId> 
      <artifactId>spring-boot-starter-log4j</artifactId> 
     </dependency> 
     <!--Alexa Dependencies --> 
     <dependency> 
      <groupId>org.apache.commons</groupId> 
      <artifactId>commons-lang3</artifactId> 
      <version>3.3.2</version> 
      <scope>compile</scope> 
     </dependency> 
     <dependency> 
      <groupId>org.apache.directory.studio</groupId> 
      <artifactId>org.apache.commons.io</artifactId> 
      <version>2.4</version> 
      <scope>compile</scope> 
     </dependency> 
     <dependency> 
      <groupId>com.amazon.alexa</groupId> 
      <artifactId>alexa-skills-kit</artifactId> 
      <version>1.1</version> 
     </dependency> 
     <dependency> 
      <groupId>com.amazonaws</groupId> 
      <artifactId>aws-lambda-java-core</artifactId> 
      <version>1.0.0</version> 
      <scope>compile</scope> 
     </dependency> 
     <dependency> 
      <groupId>com.amazonaws</groupId> 
      <artifactId>aws-java-sdk-dynamodb</artifactId> 
      <version>1.9.40</version> 
     </dependency> 

    </dependencies> 
    <build> 
     <plugins> 
      <plugin> 
       <groupId>org.springframework.boot</groupId> 
       <artifactId>spring-boot-maven-plugin</artifactId> 
      </plugin> 
      <plugin> 
       <groupId>org.apache.maven.plugins</groupId> 
       <artifactId>maven-compiler-plugin</artifactId> 
       <configuration> 
        <verbose>true</verbose> 
        <source>1.8</source> 
        <target>1.8</target> 
        <showWarnings>true</showWarnings> 
       </configuration> 
      </plugin> 
     </plugins> 
    </build>

看起来应该是正确的，因为我的设置是这样的，我不需要参考静态。我正在使用Freemarker模板，其中一些有Angular，它的工作原理。你可以分享你的项目的POM文件吗？ –

是啊当然，编辑完成显示POM文件，@ RobBaily请检查！ –

请显示您的InternalResourceViewResolver（xml或java） –

答

我看你使用thymeleaf所以要尽量像这样访问你的资源：

<script th:src="@{/js/socket.io/socket.io.js}"></script> 
<script th:src="@{/js/moment.min.js}"></script> 
<script th:src="@{/js/demoApp.js}"></script>

而且，如果这不起作用可以添加你的index.html。

对不起，我不得不这样做，我已经删除了thymleaf，因为我使用的是用于UI的angularjs。 –

答

我发现这个问题，一切正常，但： 1）我没有扩展我的应用程序类从WebMvcAutoConfiguration。

@SpringBootApplication 
@EnableWebMvc 
public class HLACUIApplication extends WebMvcAutoConfiguration { 

    public static void main(String[] args) { 
     SpringApplication.run(HLACUIApplication.class, args); 
    } 

}

这就是应用程序类应该是怎样的。

2）我不需要使用模板文件夹，因为我使用的是angularjs而不是thymeleaf。我已将所有内容放在静态文件夹中。

答

I'm also facing same issue. I think you are having html code like below: 

<html xmlns:th="http://www.thymeleaf.org"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> 
    <title>Insert title here</title> 

    <!-- Main Styles --> 
    <link rel="stylesheet" href="/css/bar.css" /> 
    <script src="/js/foo.js"></script> 

    </head> 
    <body> 
     <div>Welcome to Foo!</div> 
    </body> 
    </html> 


> I solve this is by just adding type="text/javascript". In spring boot application it's required to define type="text/javascript" otherwise it's not going to load. It'll say https:localhost:8081/js/Script.js etc error 
Solution for your Example 

    <html xmlns:th="http://www.thymeleaf.org"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> 
    <title>Insert title here</title> 

    <!-- Main Styles --> 
    <link rel="stylesheet" href="/css/bar.css" /> 
    <script type="text/javascript" src="/js/foo.js"></script> 

    </head> 
    <body> 
     <div>Welcome to Foo!</div> 
    </body> 
    </html> 
> If you are building springboot application. Then you are will have your static contain in :src/main/resources/static". Then we'll create js, css etc file and store our css as well as javascript file. 
    In this case we'll define css and javascript as below: 

    <link href="css/styles.css" rel="stylesheet"> 
    <script type="text/javascript" src="js/myScript.js"></script>

将.js，.css文件提供给html模板的弹簧引导404错误

相关推荐