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

Question

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

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

Answer 1

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

使用@JsModule 导入的JavaScript 使用strict mode。除此之外，这意味着必须在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

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

^[3]@JavaScript 注释也可以在带有 npm 的 Vaadin 14 中使用。 然后应该使用 V14 /frontend 文件夹，。

Answer 2

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

Vaadin Resource Cheat sheet

我只是想把它放在这里，因为我希望它将来会保持更新。请原谅我没有在此处发布表格，否则此答案将超过。

Answer 3

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

• 从项目根目录/resources/static创建公共目录

• 通过 prod 的 nginx 和本地 dev 的 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;
  }