Vaadin Fusion index.html 将导致离线存根

Question

我对 Jetty 和 Vaadin 还很陌生。我尝试让 Jetty 运行托管一个最小的 Vaadin Fusion 示例。
但是，在第一次访问我的空 index.html 时，我收到了 connection lost 横幅和 404，因为它试图重定向到我没有的 /offline-stub.html。

生成的视图：

在网络分流器中，您可以看到 Vaadin 以某种方式启动了重定向：

我的index.html很简单：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Vaadin Grocery App</title>
    <style>
      body {
        margin: 0;
        width: 100vw;
        height: 100vh;
      }

      #outlet {
        height: 100%;
      }
    </style>
    <!-- index.ts is included here automatically (either by the dev server or during the build) -->
  </head>

  <body>
   <h1>hello</h1>
  </body>
</html>

还有一个index.ts：

import { Router } from '@vaadin/router';
import { routes } from './routes';
import { appStore } from './stores/app-store';

export const router = new Router(document.querySelector('#outlet'));

router.setRoutes(routes);

window.addEventListener('vaadin-router-location-changed', (e) => {
  appStore.setLocation((e as CustomEvent).detail.location);
  const title = appStore.currentViewTitle;
  if (title) {
    document.title = title + ' | ' + appStore.applicationName;
  } else {
    document.title = appStore.applicationName;
  }
});

我这样启动 Jetty：

 public static void main(String[] args) throws URISyntaxException, IOException {

        Log.setLog(new StdErrLog());
        System.out.println("Server starting...");
       

        String extForm = webRoot + "/webapp";
        System.out.println(extForm);

        final ServletContextHandler context = new ServletContextHandler(ServletContextHandler.SESSIONS);
        context.setContextPath("/");

        final ResourceHandler resHandler = new ResourceHandler();
        resHandler.setResourceBase(extForm);
        final ContextHandler ctx = new ContextHandler("/");
        ctx.setHandler(resHandler);

        Server embeddedServer = new Server(8080);

        embeddedServer.insertHandler(context); // Rest/Servlets
        embeddedServer.insertHandler(resHandler); // HTML Resources
        try {
            embeddedServer.start();
            embeddedServer.join();
        } catch (Exception e) {
            System.err.println("Server error:\n" + e);
        }
        System.out.println("Server stopped");
    }

Webroot、extform - 值正确且文件位于磁盘上的指定位置：

Answer 1

不要把 ResourceHandler 和 ServletContextHandler 那样混在一起。

完全删除 ResourceHandler（及其关联的 ContextHandler）

正确定义 ServletContextHandler 资源库。
然后确保 ServletContextHandler 具有 DefaultServlet 设置。

就是这样，这就是您要做的。

哦，不要在 url 模式 / 或 /* 上声明您的 REST 端点，因为这也会阻止静态资源服务。这些 url 模式基本上意味着您的 servlet 端点（您的 REST 库？）是唯一的东西，它负责 100% 的请求。

您不这样混合的原因是因为 ServletContextHandler 和 ResourceHandler 都是终端（一旦输入，它们必须以 HTTP 响应响应）。

如果您正确使用 ServletContext，则使用针对 url-模式的最佳匹配（参见 Servlet url-模式匹配规则，例如：最长匹配），提供静态内容或您的 REST 端点取决于您的客户请求什么。

Answer 2

请注意，Vaadin Fusion 目前仅支持 Spring 引导后端。因此，您不需要配置自己的服务器。启动 Spring Boot 应用程序就足够了。我建议在 https://start.vaadin.com 上创建一个项目启动器，并以此为基础创建您的项目。

@SpringBootApplication
public class Application extends SpringBootServletInitializer implements AppShellConfigurator {

    public static void main(String[] args) {
        SpringApplication.run(Application.class, args);
    }

}

Vaadin Fusion index.html 将导致离线存根

Vaadin Fusion index.html will result in offline-stub

jetty

vaadin

vaadin-fusion

hilla