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

Question

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

另外，Vaadin plugin输出前端文件夹位于maven build输出目录中，而不是我期望的war exploded目录中。

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

如何让它将前端文件夹放到war归档中，并查看它使用了哪种配置来使编译后的前端对我的应用程序可见？

Answer 1

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

开发模式非常不同，开发说明解释说，如果你不使用嵌入式服务器，你应该在部署之前配置你的集成开发环境来运行prepare-frontend的目标：https://vaadin.com/docs/v14/flow/workflow/run-on-server-intellij.html。但是prepare-frontend只是在目标中创建了一个空的前端文件夹，如果该文件夹是空的，并且没有任何内容被复制到war分解文件夹中，它如何找到前端文件？答:当你运行应用程序时，Vaadin有一个DevModeInitializer，它在目标/前端创建文件generated-flow-imports.js，直接引用项目源文件，因此在它们所做的任何修改都可以立即反映出来，这就是为什么在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> 

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