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

Question

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

此外，在Vaadin中如何导入这些文件？Vaadin 14使用npm和Vaadin 10-13使用bower有什么区别吗？

- Erik Lumme

---

类似问题：当使用Maven驱动的Vaadin 14 Web应用程序启动时，我的Java代码加载数据或配置文件应该放在哪里 - Basil Bourque

Answer 1

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

使用@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", "一朵花")
  • /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", "一朵花")
  • /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
• Polymer 模板、custom-style 和 dom-module 样式
  • @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/resources/META-INF/resources/img/flower.jpg

Spring Boot项目和插件（jar打包）

• CSS文件
  • @StyleSheet("css/styles.css")^[2]
  • /src/main/resources/META-INF/resources/frontend/css/styles.css
• Polymer模板，custom-style 和 dom-module 样式
  • @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", "一朵花")
  • /src/main/resources/META-INF/resources/img/flower.jpg

---

脚注

^[1] @JsModule 和 @CssImport 注解也可以用于从npm包中导入。在这种情况下，路径被定义为 @JsModule("@polymer/paper-input") 或 @CssImport("some-package/style.css")。 涉及到本地前端目录的路径应以./为前缀

^[2] 在 Vaadin 14 中，@StyleSheet 注释也可与 npm 一起使用。可以使用与 V10-V13 相同的路径，包括 context:// 协议 @StyleSheet("context://style.css")，它会将路径解析为相对于 Web 应用程序的上下文路径，就像其他静态文件一样。以这种方式包含的样式可能会导致 Web 组件出现问题。

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

- Erik Lumme

---

有没有一个关于PWA（worker、manifest等）文件位置的列表？ - Michael Kemmerzell

@mkemmerz 至少服务工作者在启动时已生成。如果您想要覆盖它或想要更多信息，请查看文档 https://vaadin.com/docs/v14/flow/pwa/tutorial-pwa-introduction.html。特别是“PWA服务工作者”和“PWA Web App Manfiest”子页面可能对您有用。 - Erik Lumme

在 Web 应用程序启动时加载的简单数据文件（例如 JSON/XML/CSV 文件）应存储在哪里？我的意思是，这些文件由我的 Java 代码访问，而不会提供给 Web 浏览器。 - Basil Bourque

你可以将它放在 src/main/resources 目录下，并使用 getClass().getResourceAsStream("/myfile.txt") 来访问它，注意斜杠前面的那个符号很重要。 - Erik Lumme

Answer 2

@Tazavoo的答案已经被添加到官方Vaadin文档中:

Vaadin资源速查表

我只想在这里放置它，因为我希望这将来能够得到更新。请原谅我没有在此处发布表格，否则此答案将会变得很长。

- Michael Kemmerzell

---

参考Vaadin 15应更改为Vaadin Latest，链接应为https://vaadin.com/docs/latest/flow/advanced/loading-resources#resource-cheat-sheet。无论如何，不支持Vaadin 15，用户将被重定向到最新版。 - Avec

Answer 3

尽管Erik Lumme的答案基本上是正确的，但我想分享一下在打包为war文件的vaadin23 spring boot项目中加载java script的经验。有些微妙的差别需要注意路径的表示方法。

@JsModule:

- 以"./"作为前缀的路径：路径必须相对于"frontend"文件夹。 - 没有前缀的路径：路径必须相对于npm维护的"node_modules"文件夹。

通过Page.addJavaScript()加载java script：

- 路径必须相对于已部署应用程序的根目录（在tomcat中），或者在项目源代码中的"src/main/webapp"。

- Heri

Answer 4

我们已经共享了几个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;
  }
  

- Grigory Kislin