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 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文件夹。