Vaadin 10+（10-14）静态文件存放位置及导入方法咨询

Great questions! Let’s break this down clearly for you, since Vaadin’s resource handling shifted a bit between the 10-13 and 14 versions.

First, a quick overarching rule: All static files need to be in a location that Vaadin’s server can serve to the browser. The exact path varies slightly depending on whether you’re using Bower (10-13) or npm (14), but we’ll dive into the specifics below.

Let’s split this into two sections based on the dependency manager used, since that’s where most of the differences lie.

Vaadin 10-13 (使用Bower) #

This era relied on Bower for frontend dependencies, and static files followed a resource structure tied to Java’s classpath:

• 图片类静态文件: Store them in src/main/resources/META-INF/resources/images/ (or any subfolder under META-INF/resources/). To access them, use the root-relative path, e.g., <img src="/images/logo.png"> in a template or new Image("/images/logo.png", "Company Logo") in Java.
• CSS:
  • Global styles: Place in src/main/resources/META-INF/resources/styles/, then import in your theme class with @CssImport("./styles/global.css") (the path is relative to META-INF/resources/).
  • Component-specific styles: Either embed directly in your Polymer template’s <style> tag, or create a companion CSS file in the same directory as the template (e.g., my-view.css next to my-view.html) and link it with <link rel="stylesheet" href="./my-view.css"> inside the template.
• JavaScript:
  • Utility JS files: Put in src/main/resources/META-INF/resources/js/, then import in templates with <script src="./js/utils.js"></script>.
  • Polymer component logic: Write directly in the <script> tag of your Polymer template file.
• Polymer模板: Store in src/main/resources/META-INF/resources/views/ (or custom component folders). Bind them to your Java view class using @HtmlImport("./views/my-view.html") alongside your @Route annotation.
• Bower dependencies: Managed via bower.json, stored in bower_components/. Import components using @HtmlImport("bower_components/paper-button/paper-button.html") in your Java class or template.

Vaadin 14 (使用npm) #

Vaadin 14 switched to npm for frontend dependencies and introduced a more frontend-friendly project structure, though it still supports the traditional classpath resources:

• 图片类静态文件:
  • Recommended: Store in frontend/images/ (a top-level folder in your project root). Access via <img src="images/logo.png"> or Java’s new Image("images/logo.png", "Logo")—Vaadin automatically serves files from frontend/ at the root path.
  • Legacy support: You can still use src/main/resources/META-INF/resources/ if you prefer, but frontend/ is the modern approach.
• CSS:
  • Global styles: Place in frontend/styles/, import with @CssImport("./styles/global.css") in your theme class.
  • Component-specific styles: Two options—either place a CSS file in the same package as your Java view (e.g., MyView.css next to MyView.java) and Vaadin will auto-detect it, or store in frontend/views/ and import with @CssImport("./views/my-view.css"). Vaadin 14 also supports Shadow DOM scoped styles via <style> tags in Lit/Polymer templates.
• JavaScript:
  • Utility JS: Put in frontend/js/. Import in Java with @JavaScript("./js/utils.js"), or in templates using ES modules: <script type="module" src="./js/utils.js"></script>.
  • npm dependencies: Declare them in package.json (or use @NpmPackage annotation in Java), then import in JS files with import _ from 'lodash' (for example).
• Polymer模板: Still supported, but Lit templates are recommended. Store Polymer templates in frontend/views/ and link to Java with @HtmlImport("./views/my-view.html"). For ES module-based components (including Lit), use @JsModule("./views/my-view.js") instead.

Key Differences Between Vaadin 10-13 (Bower) and Vaadin 14 (npm) #

• Dependency management: Bower uses bower.json and bower_components/, while npm uses package.json and node_modules/. Component imports shift from @HtmlImport (Bower) to @JsModule (npm ES modules).
• Static file root: Vaadin 14 introduces frontend/ as the preferred location for static assets, aligning with standard frontend project structures, whereas 10-13 relied solely on META-INF/resources/.
• JS module support: Vaadin 14 fully supports ES modules (import/export syntax), while 10-13 uses traditional global JS or Polymer’s older module system.
• CSS flexibility: Vaadin 14 adds auto-detection of component-specific CSS files in the same Java package, plus better Shadow DOM style scoping compared to 10-13.

Hope this clears up all the confusion around resource handling across these Vaadin versions!

内容的提问来源于stack exchange，提问作者Erik Lumme