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

Question

在Vaadin 10-14中，我应该将静态文件放在哪里，例如CSS、JavaScript和聚合模板？静态文件（如图像）如何？

此外，如何在Vaadin中导入这些文件？Vaadin 14与npm和Vaadin 10-13与bower之间有差异吗？

Answer 1

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

>

常见目录表单项目根目录/资源/静态

通过prod的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")

并放入主视图（@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;
}

Answer 2

@塔扎沃奥的答案已添加到瓦丁官方文件中：

瓦丁资源备忘单

我只是想把它放在这里，因为我希望这将在未来保持更新。请原谅我没有在这里张贴表格，否则这个答案会被忽略。

Answer 3

所有路径都与项目根相关，例如，其中pom。xml文件位于Maven项目中。

使用JsModule导入的JavaScript使用严格模式。除其他外，这意味着必须在窗口对象上定义全局变量。x=…，而不仅仅是x=…。

• CSS文件

• JsModule（“/src/my script.js”）^[1]

• 新图像（"img/flower.jpg"，"一朵花"）
• /src/main/webapp/img/flower.jpg

• CSS文件

• JsModule（“/src/my script.js”）^[1]

• 新图片（“img/flower.jpg”，“一朵花”）

• CSS文件
  • @css导入（"./my-样式/styles.css"）^[1]
  • /src/main/资源/META-INF/资源/前端/我的样式/styles.css
  • JsModule（“/src/my script.js”）^[1]
  • 新图片（“img/flower.jpg”，“一朵花”）
  • CSS文件
    • @StyleSheet（"css/styles.css"）^[2]
    • /src/main/webapp/前端/css/styles.css
    • @Html导入（"src/template.html"）
    • /src/main/webapp/前端/src/template.html
    • @JavaScript（"js/script.js"）^[3]
    • /src/main/webapp/前端/js/script.js
    • 新图像（"img/flower.jpg"，"一朵花"）
    • /src/main/webapp/img/flower.jpg
    • CSS文件
      • 样式表（“css/styles.css”）^[2]
      • /src/main/resources/META-INF/resources/frontend/css/styles.css
      • @Html导入（"src/template.html"）
      • /src/main/资源/META-INF/资源/前端/src/template.html
      • @JavaScript（"js/script.js"）[3]
      • /src/main/资源/META-INF/资源/前端/js/script.js
      • 新图片（“img/flower.jpg”，“一朵花”）

      也可以使用JsModule和CssImport注释从npm包导入。在这种情况下，路径定义为JsModule（“@polymer/paper input”）或CssImport（“some package/style.css”）。引用本地前端目录的路径应以前缀/

      ^[2]样式表注释也可以在带有npm的Vaadin 14中使用。可以使用与V10-V13中相同的路径，包括上下文：///code>协议样式表（“context://style.css“”，它与其他静态文件一样，解析相对于web应用程序的上下文路径的路径。以这种方式包含的样式可能会导致web组件出现问题。

      Vaadin 14和npm中也可以使用JavaScript注释。然后应使用V14/frontend文件夹，。