spring - 我应该将我的 Vaadin 10+ 静态文件放在哪里？

Question

在 Vaadin 10-14 中，我应该在哪里放置我的静态文件，例如 CSS、JavaScript 和 Polymer 模板？图像等静态文件怎么样？

另外，如何在 Vaadin 中导入这些文件？带有 npm 的 Vaadin 14 和带有 bower 的 Vaadin 10-13 之间有区别吗？

Answer 1

所有路径都相对于项目根目录，例如pom.xml文件位于 Maven 项目中。

使用 @JsModule 导入的 JavaScript使用 strict mode .除其他外，这意味着必须在 window 上定义全局变量。对象，window.x = ... , 而不仅仅是 x = ... .

带有 npm 的 Vaadin 14

非 Spring Boot 项目( war 打包)

CSS 文件

@CssImport("./my-styles/styles.css") [1]

/frontend/my-styles/styles.css

JavaScript 和 Polymer 模板

@JsModule("./src/my-script.js") [1]

/frontend/src/my-script.js

静态文件，例如图片

new Image("img/flower.jpg", "A flower")

/src/main/webapp/img/flower.jpg

Spring Boot 项目(jar 打包)

CSS 文件

@CssImport("./my-styles/styles.css") [1]

/frontend/my-styles/styles.css

JavaScript 和 Polymer 模板

@JsModule("./src/my-script.js") [1]

/frontend/src/my-script.js

静态文件，例如图片

new Image("img/flower.jpg", "A flower")

/src/main/resources/META-INF/resources/img/flower.jpg

附加组件( jar 包装)

CSS 文件

@CssImport("./my-styles/styles.css") [1]

/src/main/resources/META-INF/resources/frontend/my-styles/styles.css

JavaScript 和 Polymer 模板

@JsModule("./src/my-script.js") [1]

/src/main/resources/META-INF/resources/frontend/src/my-script.js

静态文件，例如图片

new Image("img/flower.jpg", "A flower")

/src/main/resources/META-INF/resources/img/flower.jpg

兼容模式下的 Vaadin 10-13、Vaadin 14

非 Spring Boot 项目( war 打包)

CSS 文件

@StyleSheet("css/styles.css") [2]

/src/main/webapp/frontend/css/styles.css

polymer 模板、自定义样式和 dom 模块样式

@HtmlImport("src/template.html")

/src/main/webapp/frontend/src/template.html

JavaScript

@JavaScript("js/script.js") [3]

/src/main/webapp/frontend/js/script.js

静态文件，例如图片

new Image("img/flower.jpg", "A flower")

/src/main/webapp/img/flower.jpg

Spring Boot 项目和附加组件(jar 打包)

CSS 文件

@StyleSheet("css/styles.css") [2]

/src/main/resources/META-INF/resources/frontend/css/styles.css

polymer 模板、自定义样式和 dom 模块样式

@HtmlImport("src/template.html")

/src/main/resources/META-INF/resources/frontend/src/template.html

JavaScript

@JavaScript("js/script.js") [3]

/src/main/resources/META-INF/resources/frontend/js/script.js

静态文件，例如图片

new Image("img/flower.jpg", "A flower")

/src/main/resources/META-INF/resources/img/flower.jpg

脚注

[1] @JsModule和 @CssImport注释也可用于从 npm 包导入。在这种情况下，路径定义为 @JsModule("@polymer/paper-input")或 @CssImport("some-package/style.css") . 引用本地前端目录的路径应以 ./ 为前缀

[2] @StyleSheet注释也可以在带有 npm 的 Vaadin 14 中使用。可以使用与 V10-V13 相同的路径，包括 context://协议(protocol) @StyleSheet("context://style.css") ，它解析相对于 Web 应用程序的上下文路径的路径，就像其他静态文件一样。 以这种方式包含的样式可能会导致 Web 组件出现问题 .

[3] @JavaScript注释也可以在带有 npm 的 Vaadin 14 中使用。 V14 /frontend然后应该使用文件夹 ,.