如何更改前端文件夹位置并在 Vaadin14 中配置它？

Question

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

另外，Vaadin 插件在 Maven 构建输出目录中输出前端文件夹，而不是我期望的 war 爆炸目录。

由于我没有将此文件夹映射到我的 web.xml 文件中，它如何使其工作？

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

Answer 1

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

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

开发模式对前端文件夹进行了一些修改，使开发更加顺利，而生产模式将前端的所有内容编译成由 Vaadin servlet 提供的缩小文件，因此只有在生产模式下，前端才会进入 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> 

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