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

Question

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

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

Answer 1

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

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

带有 npm 的 Vaadin 14

非Spring引导项目（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 启动项目（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引导项目（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 引导项目和附加组件（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 注释也可以在 Vaadin 14 中与 npm 一起使用。可以使用与 V10-V13 中相同的路径，包括 context:// 协议 @StyleSheet("context://style.css")，它解析相对于 Web 应用程序上下文路径的路径，就像其他静态文件一样。 以这种方式包含的样式可能会导致 Web 组件出现问题。

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

Answer 2

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

Vaadin Resource Cheat sheet

我只是想把它放在这里，因为我希望它能在未来保持更新。请原谅我没有 post 此处的表格，但此答案将运行覆盖。

Answer 3

我们共享了几个 Vaadin 14 模块的资源，如下所示：

将公共目录作为项目根目录 /resources/static

在产品中通过 nginx 路由请求，在本地开发中通过 Spring 路由请求

public class MvcConfig implements WebMvcConfigurer {

   @Override
   public void addResourceHandlers(ResourceHandlerRegistry registry) {
      registry.addResourceHandler("/static/**")
     .addResourceLocations("file:./resources/static/")
     .setCachePeriod(3600);
     registry.setOrder(Integer.MAX_VALUE);

}

对于css全部删除

@CssImport("./styles/root/global-styles.css")

并放入MainView（@Route视图），见https://vaadin.com/docs/v14/flow/styling/importing-style-sheets:

   @StyleSheet("/static/css/global-styles.css")

图片放在css

.plus-btn {
   background: url("../static/icons/plus.svg") no-repeat center;
}

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

Where should I place my Vaadin 10+ static files?

spring

stylesheet

vaadin

polymer

vaadin-flow

带有 npm 的 Vaadin 14

非Spring引导项目（war打包）

Spring 启动项目（jar 打包）

插件（jar 包装）

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

非Spring引导项目（war打包）

Spring 引导项目和附加组件（jar 打包）

脚注