显示导航

合并 Grails Vue 配置文件客户端和服务器项目

了解如何生成 JAR 文件，以结合 Vue 和 Grails 产品工艺品。

作者：Nirav Assar、Zachary Klein

Grails 版本 3.3.8

1 Grails 培训

Grails 培训 - 由创建和积极维护 Grails 框架的人员开发和提供！

2 入门

在本指南中，您将创建 Vue 配置文件的server和client项目的合并构建。默认情况下，Vue 配置文件设置单独的前端和后端应用，这可以提升开发流程的效率。但可能并不符合部署需要，特别是如果您的整个应用要部署到 servlet 容器（例如 Tomcat）或作为“胖”JAR 执行。借助 Grails 和 Gradle 构建工具的灵活性，我们只需进行一些更改便可以配置 Grails/Vue 应用的统一构建。

2.1 所需内容

要完成此指南，您需要以下内容

  • 手头有一点时间

  • 得体的文本编辑器或 IDE

  • JDK 1.8 或更高版本（适当配置了JAVA_HOME）已安装

2.2 如何完成指南

要开始操作，请执行以下操作

或

Grails 指南存储库包含两个文件夹

  • initial初始项目。通常是简单的 Grails 应用，其中包含一些附加代码，以便快速入门。

  • complete已完成示例。它是完成指南介绍的步骤并在initial文件夹应用这些更改的结果。

要完成指南，请转到initial文件夹

  • cd进入grails-guides/grails-vue-combined/initial

并按照后续章节中的说明进行操作。

如果你“cd”到“grails-guides/grails-vue-combined/complete”，你可以直接获取完整的示例

3 编写应用程序

如果你打开了本指南的“initial”项目，你会发现一个由 Vue 配置文件生成的简单项目。

“server”Grails 应用程序和“client”Vue 应用程序都设置了“production”构建任务——你可以运行“./gradlew server:assemble”来构建一个 WAR 或 JAR 文件，并且你可以运行“yarn build”（或“./gradlew client:build”）来生成一个静态 Vue/webpack 捆绑包。我们的第一步是在我们的项目结构的顶部，在“client”和“server”子项目之上新建一个“build.gradle”文件。

3.1 配置 Gradle

初始文件夹包含一个使用“vue”配置文件生成的 Grails 应用程序。该项目是一个Gradle 多项目构建。

在与“settings.gradle”同级的根项目中创建一个“build.gradle”文件。添加以下内容

build.gradle
task copyClientResources(dependsOn: ':client:build', type: Copy) { (1)
    group = 'build'
    description = 'Copy client resources into server'
    from "${project(':client').projectDir}/dist"
    into "${project(':server').buildDir}/resources/main/public"
}
task assembleServerAndClient(type: Copy, dependsOn: ['copyClientResources', ':server:assemble']) { (2)
    group = 'build'
    description = 'Build combined server & client JAR/WAR'
    from fileTree(dir: "${project(':server').buildDir}/libs/") (3)
    into "${rootProject.buildDir}"
    doLast {
        logger.quiet "JAR/WAR generated at ${rootProject.buildDir}. It combines the server and client projects."
    }
}
task(":server:assemble").mustRunAfter(copyClientResources) (4)
1 “copyClientResources”任务会将“yarn build”生成的静态文件复制到“server”项目的资源目录中。
2 “assembleServerAndClient”任务将复制步骤与“server”项目的现有 Gradle “assemble”任务关联。这意味着，只有运行此顶级任务（单独运行“server:assemble”）才会获取到我们的统一存档。它会生成一个“普通”WAR/JAR 文件，但不包含客户端资源。
3 如果要执行“copyClientResources”，则它必须先于“：sever：assemble”。这可确保在组装 Grails 应用程序时客户端静态文件可用。
4 在创建了合并后的 JAR 文件之后，我们将文件复制到顶级“build”目录。

在本指南中，我们将使用一个可执行 JAR 文件作为我们的部署目标。为此，打开“server”项目的“build.gradle”文件并删除以下行

server/build.gradle
apply plugin:"war"
如果你希望生成一个 WAR 文件，请将“apply plugin: "war"”行留在“server/build.gradle”中。

3.2 更新配置

既然我们有一个统一的 Gradle 构建目标，我们还要做一些配置上的修改。这些修改全部与分开的 Grails 和 Vue 应用程序与我们新的合并部署之间的 URL 差异有关。

默认情况下，已部署的 Grails 应用程序中的静态资源会从“/static”基本 URL 提供服务。该 URL 会与 Vue 应用程序的预期相冲突，但幸运的是，这是一个非常简单的修改。

编辑“server/grails-app/conf/application.yml”

server/grails-app/conf/application.yml
grails:
    resources:
        pattern: /**

这会简单地将静态资源 URL 设置为根上下文。

类似地，我们需要编辑 Vue 应用用来对 Grails 应用执行 REST 调用的 URL。可以在“client”项目中的 `client/config/prod.env.js` 中完成此操作。此文件在生产环境中使用，并将 SERVER_URL 设置为根上下文。

client/config/prod.env.js
'use strict'
module.exports = {
  NODE_ENV: '"production"',
  SERVER_URL: '""'
}

3.3 URL 映射

我们的最终更改需要在 `UrlMappings.groovy` 中进行。回想一下，默认情况下 `server` Grails 应用在根上下文中呈现一些应用程序元数据。但是，为了使我们的组合构建正常工作，我们需要在根上下文中加载我们的 Vue 应用。幸运的是，这也是一个非常简单的更改。

编辑 `server/grails-app/controllers/demo/UrlMappings.groovy`

删除此行

'/'(controller: 'application', action:'index')

替换为此

server/grails-app/controllers/example/grails/UrlMappings.groovy
if ( Environment.current == Environment.PRODUCTION ) {
    '/'(uri: '/index.html')
} else {
    '/'(controller: 'application', action:'index')
}
1 我们使用 `grails.util.Environment` 类来确定我们是在开发模式下运行还是在已部署工件中运行，并适当设置 URL 映射。

有了此新映射配置，当我们构建可执行 JAR 文件时，`URL` 将映射到 `/`， `/index.html` 恰巧也是我们 Vue 应用程序的着陆页。

4 运行应用程序

要生成统一的可执行 JAR 文件，只需运行以下命令

~ ./gradlew assembleServerAndClient

...
JAR generated at build. It combines the server and client projects.

要运行应用程序，请使用 `java -jar` 命令

~ java -jar build/server-0.1.jar

...
Grails application running at http://localhost:8080 in environment: production

浏览到 `http://localhost:8080`，你应该会看到 Vue 应用程序。

对 `http://localhost:8080/application/` 执行 GET 请求，你应该会看到来自 Grails 应用程序的应用程序元数据。

恭喜，你拥有了统一的 Grails/Vue 生产版本！

在开发模式下运行应用程序
 
- ./gradlew client:start - for the client Vue app
- ./gradlew server:bootRun - for the server Grails app
- ./gradlew bootRun -parallel - to launch them at the same time with one command

5 Grails 帮助

Object Computing, Inc. (OCI) 赞助了此指南的创建。提供各种咨询和支持服务。

OCI 是 Grails 的家园

认识团队