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

Posted

技术标签:

【中文标题】我应该把我的 Vaadin 10+ 静态文件放在哪里？【英文标题】：Where should I place my Vaadin 10+ static files? 【发布时间】：2019-12-24 12:14:30 【问题描述】：

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

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

【问题讨论】：

类似：Where to put data or config files loaded by my Java code when web app launches in a Vaadin 14 web app driven by Maven 【参考方案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 文件夹，。

【讨论】：

是否有关于 PWA（worker、manifest 等）的文件位置列表？ @mkemmerz 至少 service worker 是在启动时生成的。如果您想覆盖它或想了解更多信息，请查看文档vaadin.com/docs/v14/flow/pwa/tutorial-pwa-introduction.html。特别是“PWA Service Worker”和“PWA Web App Manfiest”子页面可能对您有用。 在哪里存储 Web 应用启动时加载的简单数据文件，例如 JSON/XML/CSV 文件？我的意思是由我的 Java 代码访问的文件，从未提供给 Web 浏览器。 @BasilBourque 您可以将其放入src/main/resources 并访问它，例如对于getClass().getResourceAsStream("/myfile.txt")，前导斜线很重要。【参考方案2】：

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

Vaadin Resource Cheat sheet

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

【讨论】：

对Vaadin 15的引用应更改为Vaadin Latest，链接应为vaadin.com/docs/latest/flow/advanced/… 无论如何不支持Vaadin 15，用户将被重定向到最新版本。【参考方案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;

【讨论】：

以上是关于我应该把我的 Vaadin 10+ 静态文件放在哪里？的主要内容，如果未能解决你的问题，请参考以下文章

我在哪里把我的 favicon 和 Hugo 放在一起

我应该把我的 php 文件放在哪里让 Xampp 解析它们？

我应该把我的着色器代码放在哪里？

我应该把我的 .jasper 文件放在哪里以及如何访问它？ [复制]

在 ubuntu 上全新安装 gvim。我应该把我的插件放在哪里？

我应该把我的 DTO 放在哪里？