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

Question

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

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

Answer 1

所有路径都是相对于项目根目录的，例如其中

pom.xml

文件位于 Maven 项目中。

使用

@JsModule

导入的 JavaScript 使用 严格模式。除此之外，这意味着必须在

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

附加组件（罐装）

• 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

• 聚合物模板、自定义样式和 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

• 聚合物模板、自定义样式和 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 资源备忘单

我只是想把它放在这里，因为我希望将来能保持更新。请原谅我不会在这里发布表格，但否则这个答案将会结束。

Answer 3

虽然Erik Lumme的答案基本上是正确的，但我想分享一下我在vaadin23 spring boot项目中加载java脚本（打包为war）的经验。关于如何指示路径存在细微的差异。

@JsModule：

• 以“./”为前缀的路径：路径必须相对于“frontend”文件夹
• 不带前缀的路径：路径必须相对于“node_modules”文件夹（由npm维护）。

通过Page.addJavaScript()加载java脚本：路径必须相对于已部署应用程序的根目录（在tomcat中）rsp。到项目源中的“src/main/webapp”。

Answer 4

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

• маke 项目根目录下的公共目录

  /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;
  }