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

Question

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

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

Answer 1

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

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

Vaadin 14和npm

非春季启动项目（战争包装）

• 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项目（罐包装）

• 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

附加组件（罐装）

• 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在兼容模式下

非春季启动项目（战争包装）

• CSS文件
  • @StyleSheet("css/styles.css")^[2]
  • /src/main/webapp/frontend/css/styles.css
• 聚合物模板，自定义样式和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项目和附加组件（罐装）

• CSS文件
  • @StyleSheet("css/styles.css")^[2]
  • /src/main/resources/META-INF/resources/frontend/css/styles.css
• 聚合物模板，自定义样式和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注释也可以在Vaadin 14被用于与NPM。可以使用与V10-V13中相同的路径，包括context://protocol @StyleSheet("context://style.css")，它可以解析相对于Web应用程序上下文路径的路径，就像其他静态文件一样。以这种方式包含的样式可能会导致Web组件出现问题。

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

Answer 2

@Tazavoo 的答案已添加到官方 Vaadin 文档中：

Vaadin 资源备忘单

我只是想把它放在这里，因为我希望这会在未来保持更新。请原谅我没有在这里张贴表格，否则这个答案会被忽略。