无法通过Thymeleaf从HTML找到相关的JS

蛋糕 :

我试图建立一个基于Spring的简单应用程序。这是我项目的当前文件夹结构:

src
 |
  --main
      |
       --java
      |
       --resources
            |
             -- templates
                    |
                     -- Index.html
                     -- Index.js

我的依赖是愚蠢的:

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-data-rest</artifactId>
</dependency>

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
    <version>2.0.3.RELEASE</version>
</dependency>
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
    <version>2.0.3.RELEASE</version>
</dependency>

<dependency>
    <groupId>org.projectlombok</groupId>
    <artifactId>lombok</artifactId>
    <optional>true</optional>
</dependency>
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-test</artifactId>
    <scope>test</scope>
    <exclusions>
        <exclusion>
            <groupId>org.junit.vintage</groupId>
            <artifactId>junit-vintage-engine</artifactId>
        </exclusion>
    </exclusions>
</dependency>

如果我将Index.js的逻辑放到Index.html中,那么一切都将完美运行。相反,如果我在控制台上引用Index.js,则会看到404,因为它找不到js。

这是html的代码:

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script
            src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js">
    </script>
</head>
<body>

        <html>
        <head>
            <link rel="stylesheet" href="index.css">
        </head>
        <body>

        <div id="app">
            {{ message }}
        </div>

        <script src="index.js"></script>
        </body>
        </html>

</body>
</html>

和js仅供您参考:

var app = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!'
    }
});
蛋糕 :

找到了解决方案,希望它可以帮助遇到我同样问题的每个人。实际上,Thymeleaf是一个视图解析器,用于在resources / template文件夹中搜索视图。

如果我们想从视图中使用相关的JS脚本,则必须将其放置在Resources / static文件夹中,并且仍要从html引用为:

<script src="index.js"></script>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章