如何更改前端文件夹位置并在 Vaadin 14 中进行配置？

Question

如何将 Maven Vaadin 14 项目中的默认前端文件夹位置从 ${project.basedir}/frontend 更改为 ${project.basedir}/src/main/frontend？

此外，Vaadin 插件在 maven 构建输出目录中输出前端文件夹，而不是 war exploded 目录，我希望它在该目录中。

既然我没有将此文件夹映射到我的 web.xml 文件中，它是如何工作的？

如何将 frontend 文件夹放入 war 存档中，并查看它使用哪个配置使已编译的前端对我的应用程序可见？

Answer 1

Vaadin 在开发模式和生产模式中使用前端文件夹的方式不同。在生产中，它使用 build-frontend 目标构建前端。 Vaadin Maven 插件没有合适的文档，我发现最好的地方是解释每个目标的作用：https://vaadin.com/docs/v14/flow/production/tutorial-production-mode-advanced.html。此页面说明 build-frontend 负责在生产模式下构建并将处理的前端放入 WEB-INF\classes\META-INF\VAADIN\build。

开发模式非常不同，开发说明解释说，如果您不使用嵌入式服务器，则应在部署前将 IDE 配置为运行 prepare-frontend 目标：https://vaadin.com/docs/v14/flow/workflow/run-on-server-intellij.html。但是 prepare-frontend 只是将空的前端文件夹创建到目标中，如果文件夹是空的并且没有任何内容被复制到 war 展开的文件夹，它如何找到前端文件？答：当你运行应用程序时，Vaadin 有一个 DevModeInitializer 将文件 generated-flow-imports.js 创建到 target/frontend 中，它直接引用项目源文件，因此对它们所做的任何修改都可能是立即反映出来，这就是为什么 web.xml 或上下文侦听器中不需要任何配置的原因。

Dev 模式对前端文件夹进行了一些修改，使开发更顺畅，而 prod 模式将前端的所有内容编译为由 Vaadin servlet 提供的缩小文件，因此只有在 prod 模式下，前端才会进入 war 文件。在第一种情况下，必须使用 prepare-frontend，在第二种情况下，也必须使用 build-frontend。因此，为了修改前端文件夹位置，必须更改这两个目标中的插件配置：

<plugin>
    <groupId>com.vaadin</groupId>
    <artifactId>vaadin-maven-plugin</artifactId>
    <version>${vaadin.version}</version>
    <executions>
        <execution>
            <goals>
                <goal>prepare-frontend</goal>
            </goals>
        </execution>
    </executions>
    <configuration>
        <frontendDirectory>${project.basedir}/src/main/frontend</frontendDirectory>
    </configuration>
</plugin>

<profiles>
    <profile>
        <!-- Production mode is activated using -Pproduction -->
        <id>production</id>
        <properties>
            <vaadin.productionMode>true</vaadin.productionMode>
        </properties>

        <dependencies>
            <dependency>
                <groupId>com.vaadin</groupId>
                <artifactId>flow-server-production-mode</artifactId>
            </dependency>
        </dependencies>

        <build>
            <plugins>
                <plugin>
                    <groupId>com.vaadin</groupId>
                    <artifactId>vaadin-maven-plugin</artifactId>
                    <executions>
                        <execution>
                            <goals>
                                <goal>build-frontend</goal>
                            </goals>
                            <phase>compile</phase>
                        </execution>
                    </executions>
                    <configuration>
                        <frontendDirectory>${project.basedir}/src/main/frontend</frontendDirectory>
                    </configuration>
                </plugin>
            </plugins>
        </build>
    </profile>

这样，修改将在开发模式和生产模式下都有效。

如何更改前端文件夹位置并在 Vaadin 14 中进行配置？

How do I change frontend folder location and configure it in Vaadin14?

java

vaadin

maven

vaadin-flow

vaadin14