如何在Vaadin Flow中创建头部与主体均为空的空视图UI？

Got it, let's figure out how to create a totally empty Vaadin Flow UI where both the <head> and <body> are completely clean—no default scripts, styles, or auto-generated tags cluttering up the HTML. Here's what you need to do:

1. Create a Minimal View That Renders Raw Empty HTML #

The key is to bypass Vaadin's default component rendering and directly output the exact empty HTML structure you want. Extend the Html component and pass your target HTML, then clear any leftover default content from the page:

@Route("") // Set this as your root route
public class EmptyHtmlView extends Html {

    public EmptyHtmlView() {
        // Pass the exact empty HTML structure you're targeting
        super("<html><head></head><body></body></html>");
        
        // Wipe out any remaining default head content Vaadin might add
        Page page = Page.getCurrent();
        page.getStyles().clear();
        page.getJavaScript().clear();
        page.getHead().getChildren().removeIf(child -> true);
    }
}

2. Disable Vaadin's Default Client Runtime Injections #

Even with the above view, Vaadin might still inject its bootstrap scripts and styles under the hood. To stop this, adjust your app's configuration:

For Spring Boot projects

Add these properties to your application.properties file:

# Disable auto-loading of Vaadin's frontend resources
vaadin.whitelisted-packages=
vaadin.frontend.url=
vaadin.flow.embed-app-shell=false

For non-Spring Boot projects

Create a custom VaadinServlet to block default resource loading:

@WebServlet(urlPatterns = "/*", name = "EmptyUIServlet", asyncSupported = true)
@VaadinServletConfiguration(ui = EmptyHtmlView.class, productionMode = false)
public class EmptyUIServlet extends VaadinServlet {
    @Override
    protected void servletInitialized() throws ServletException {
        super.servletInitialized();
        getService().setClassLoader(null); // Prevent loading default frontend assets
    }
}

3. Clean Up App Shell Configuration (If Needed) #

If you're using an AppShellConfigurator in your project, make sure it doesn't add any extra content to the page. Override the configurePage method to clear all default header tags:

@Route("")
public class EmptyHtmlView extends Html implements AppShellConfigurator {

    public EmptyHtmlView() {
        super("<html><head></head><body></body></html>");
        Page page = Page.getCurrent();
        page.getStyles().clear();
        page.getJavaScript().clear();
        page.getHead().getChildren().removeIf(child -> true);
    }

    @Override
    public void configurePage(AppShellSettings settings) {
        // Remove all auto-added meta tags, links, and scripts from the head
        settings.getHeaderTags().clear();
    }
}

Verify the Output #

Once you run the app, navigating to the root route should serve exactly the HTML you want:

<html><head><!-- empty --></head><body><!-- empty --></body></html>

内容的提问来源于stack exchange，提问作者Naranmandakh Tsogoo