如何将 maven Vaadin 14 项目中的默认前端文件夹位置从${project.basedir}/frontend
更改为${project.basedir}/src/main/frontend
?
此外,Vaadin 插件在 maven 构建输出目录中输出前端文件夹,而不是我期望的 war 爆炸目录。
由于我没有将此文件夹映射到我的 web.xml 文件中,它如何使其工作?
如何让它将前端文件夹放入战争档案并查看它使用哪个配置来使编译的前端对我的应用程序可见?
如何将 maven Vaadin 14 项目中的默认前端文件夹位置从${project.basedir}/frontend
更改为${project.basedir}/src/main/frontend
?
此外,Vaadin 插件在 maven 构建输出目录中输出前端文件夹,而不是我期望的 war 爆炸目录。
由于我没有将此文件夹映射到我的 web.xml 文件中,它如何使其工作?
如何让它将前端文件夹放入战争档案并查看它使用哪个配置来使编译的前端对我的应用程序可见?
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。
开发模式非常不同,开发说明解释说,如果您不使用嵌入式服务器,您应该prepare-frontend
在部署之前配置您的 IDE 以运行目标:https ://vaadin.com/docs/v14/flow/workflow/run-on-服务器-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>
这样,修改将在开发和生产模式下工作。