显示导航

结合365bet地区 Vue配置文件客户端和服务器项目

365bet地区了解如何生成结合了Vue和365bet地区生产工件的JAR文件

s尼拉夫·亚萨尔·贾查里亚·卡兰

365bet地区版本 3.3.8

365bet地区培训

365bet地区培训由创建并积极维护365bet地区框架的人们开发和交付

入门

在本指南中,您将创建服务器客户365bet地区Vue概要文件中的项目默认情况下,Vue概要文件设置了单独的前端和后端应用程序,可以使开发过程更高效。但是,这可能无法满足您的部署需求,尤其是在将整个应用程序部署到Tomcat或Servlet容器等情况下。由于365bet地区和Gradle构建工具的灵活性,我们可以通过少量的更改配置365bet地区 Vue应用程序的统一构建

您将需要什么

要完成本指南,您将需要以下内容

  • 花些时间在你手上

  • 体面的文本编辑器或IDE

  • 安装了JDK或更高版本JAVA首页适当配置

如何完成指南

要开始,请执行以下操作

要么

365bet地区指南存储库包含两个文件夹

  • 初始初始项目通常是一个简单的365bet地区应用程序,其中包含一些其他代码,可以帮助您快速入门

  • 完成一个完整的示例它是按照指南中介绍的步骤进行操作并将这些更改应用于文档的结果。初始

要完成指南,请转到初始

  • 光盘进入grails指南grails vue合并的初始

并按照下一节中的说明进行操作

您可以直接前往完成的例子如果你光盘进入grails指南grails vue组合完成

编写申请

如果您打开初始本指南的项目,您会发现从Vue配置文件生成的普通项目

这俩服务器365bet地区365bet地区应用程序和客户Vue应用程式有生产建立可以运行的任务gradlew服务器组装建立一个WAR或JAR文件,你可以运行纱线结实要么gradlew客户端构建生成静态Vue Webpack捆绑包我们的第一步是创建一个新的建立gradle文件位于项目结构顶部的上方客户服务器子项目

配置Gradle

365bet地区初始文件夹包含使用以下命令生成的365bet地区应用程序:查看个人资料该项目是Gradle Multi Project构建.

创建一个建立gradle根项目中文件的级别与设置gradle添加以下内容

建立gradle
任务copyClientResources取决于: '客户建立', 类型复制(1)'建立'描述'将客户端资源复制到服务器中'"${项目'客户'projectDir}dist"进入"${项目'服务器'buildDir}资源主要公众"任务assembleServerAndClient类型复制取决于: ['copyClientResources', '服务器组装']) { (2)'建立'描述'构建组合的服务器客户端JAR WAR'来自fileTree: "${项目'服务器'buildDir}") (3)进入"${rootProject buildDir}"记录器安静"JAR WAR产生于${rootProject buildDir}它结合了服务器和客户端项目"任务"服务器组装"mustRunAfter copyClientResources(4)
1 copyClientResources任务将复制由生成的静态文件纱线结实进入资源目录服务器项目
2 assembleServerAndClient任务将复制步骤与现有Gradle联系起来组装的任务服务器项目这意味着只有在运行此顶级任务时,我们才会获得统一的存档服务器组装一个人将生成一个没有客户端资源的普通WAR JAR文件
3 copyClientResources要执行它必须在切断组装365bet地区这确保了在组装365bet地区应用程序时客户端静态文件将可用
4 创建合并的JAR文件后,我们将文件复制到顶层建立目录

在本指南中,我们将使用可执行的JAR文件作为我们的部署目标。要启用此功能,请打开服务器项目建立gradle文件和删除下一行

服务器构建gradle
应用插入:"战争"
离开应用插件大战排入服务器构建gradle如果您想生成WAR文件

更新我们的配置

365bet地区现在我们有了一个统一的Gradle构建目标,我们需要进行一些其他配置更改,所有这些更改都与单独的365bet地区 Vue应用程序和我们新的组合部署之间的URL差异有关。

365bet地区默认情况下,已部署的365bet地区应用中的静态资源是通过静态的基本URL与我们的Vue应用程序期望的冲突,但幸运的是,这是一个非常简单的更改

编辑服务器grails应用conf应用yml:

服务器grails应用conf应用yml
:
    资源:
        : /**

这只是将静态资源URL设置为根上下文

365bet地区类似地,我们需要编辑Vue应用程序用来对365bet地区应用程序进行REST调用的URL。客户端配置产品环境js在里面客户项目此文件在生产环境中使用,并将SERVER URL设置为根上下文

客户端配置产品环境js
'使用严格'模块出口节点环境: '生产',
  服务器URL: '""'
}

网址映射

UrlMappings常规如果您默认记得服务器365bet地区365bet地区应用程序在根上下文中呈现了一些应用程序元数据,但是,为了使我们的组合构建正常工作,我们需要在根上下文中加载Vue应用程序。幸运的是,这也是一个非常简单的更改

编辑服务器grails应用程序控制器演示UrlMappings groovy:

删除这行

'/'(控制者: '应用', 行动:'指数')

用它替换

服务器grails应用程序控制器示例grails UrlMappings groovy
如果环境当前环境生产'/'(小号: '索引html')
} 其他 {
    '/'(控制者: '应用', 行动:'指数')
}
1 我们正在使用免费环境类,以确定我们是在开发模式下运行还是在已部署的工件中运行,并适当设置URL映射

使用这个新的映射配置,当我们构建可执行的JAR文件时,/URL将被映射到索引html这恰好也是我们Vue应用程序的登录页面

运行应用程序

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

在构建时生成的gradlew assembleServerAndClient JAR它将服务器和客户端项目结合在一起

要运行该应用程序,请使用Java罐子命令

365bet地区java jar构建服务器jar 365bet地区应用程序在环境生产中的http localhost运行

浏览到HTTP本地主机并且您应该看到Vue应用程序

向GET请求http本地主机应用程序365bet地区并且您应该从365bet地区应用程序中看到应用程序元数据

365bet地区恭喜您拥有统一的365bet地区 Vue生产版本

在开发模式下运行应用程序
365bet地区gradlew为客户端启动客户端Vue应用程序gradlew服务器bootRun为服务器365bet地区应用程序gradlew bootRun并行运行,以使用一个命令同时启动它们

帮助365bet地区

OCI赞助了本指南的创建OCI提供了几种365bet地区服务:

免费咨询

OCI 365bet地区团队包括365bet地区联合创始人Jeff Scott Brown和Graeme Rocher检查我们的365bet地区课程并向发展和维护365bet地区的工程师学习

Grails OCI团队