將.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>

來源

2016-07-24 Furquan Ahmed

看起來應該是正確的，因爲我的設置是這樣的，我不需要參考靜態。我正在使用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。

來源

2016-07-25 07:18:29

對不起，我不得不這樣做，我已經刪除了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。我已將所有內容放在靜態文件夾中。

來源

2016-07-25 09:59:53

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>

來源

2017-08-21 14:16:59

將.js，.css文件提供給html模板的彈簧引導404錯誤

回答

相關問題