1. 首页
  2. 问题
  3. Vaadin 10+静态文件应该放在哪里？
一尘不染

Vaadin 10+静态文件应该放在哪里？

spring

在Vaadin 10-14中，应该将静态文件（例如CSS，JavaScript和Polymer模板）放在哪里？静态文件（例如图像）如何？

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


阅读 431

收藏
2020-04-20

共1个答案

一尘不染

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

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

Vaadin 14 with npm
Non-Spring Boot projects (war packaging)

  • CSS files
  • @CssImport(“./my-styles/styles.css”)[1]

  • /frontend/my-styles/styles.css

  • JavaScript and Polymer templates

  • @JsModule(“./src/my-script.js”)[1]

  • /frontend/src/my-script.js

  • Static files, e.g. images

  • new Image(“img/flower.jpg”, “A flower”)
  • /src/main/webapp/img/flower.jpg

Spring Boot projects (jar packaging)

  • CSS files
  • @CssImport(“./my-styles/styles.css”)[1]

  • /frontend/my-styles/styles.css

  • JavaScript and Polymer templates

  • @JsModule(“./src/my-script.js”)[1]

  • /frontend/src/my-script.js

  • Static files, e.g. images

  • new Image(“img/flower.jpg”, “A flower”)
  • /src/main/resources/META-INF/resources/img/flower.jpg

Add-ons (jar packaging)

  • CSS files
  • @CssImport(“./my-styles/styles.css”)[1]

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

  • JavaScript and Polymer templates

  • @JsModule(“./src/my-script.js”)[1]

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

  • Static files, e.g. images

  • new Im`age(“img/flower.jpg”, “A flower”)
  • /src/ma`in/resources/META-INF/resources/img/flower.jpg

Vaadin 10-13，Vaadin 14在兼容模式下
非spring启动项目（战争包装）

  • CSS files
  • @StyleSheet(“css/styles.css”)[2]

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

  • Polymer templates, custom-style and dom-module styles

  • @HtmlImport(“src/template.html”)

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

  • JavaScript

  • @JavaScript(“js/script.js”)[3]

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

  • Static files, e.g. images

  • new Image(“img/flower.jpg”, “A flower”)
  • /src/main/webapp/img/flower.jpg

Spring Boot projects and add-ons (jar packaging)

  • CSS files
  • @StyleSheet(“css/styles.css”)[2]

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

  • Polymer templates, custom-style and dom-module styles

  • @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

  • Static files, e.g. images

  • new Image(“img/flower.jpg”, “A flower”)
  • /src/main/resources/META-INF/resources/img/flower.jpg

Footnotes

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

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

[3]所述的@JavaScript注释也可以在Vaadin 14被用于与NPM。然后应使用V14 /frontend文件夹。

2020-04-20