在Play Framework应用程序中使用Vue.js

Question

如果有人使用 Vue.js 作为 Play Framework 应用程序的前端，我想知道推荐的方法。

我目前的设置是一个Play应用程序（使用Java），其中包含用于处理REST请求的模型，控制器和DAO - 这实际上是我的后端。现在Play还允许您使用 Twirl 模板库来创建可以作为静态HTML提供的视图。但是，我发现Twirl语法不必要地复杂且难以为单页面应用程序构成视图。我更喜欢使用更像Vue

这样的UI工作的东西

我的研究显示了将Vue集成到Play的两个选项：

1. 使用 Webjars ：
   它的某种Play插件将 JQuery 等JavaScript库捆绑到可由Play部署的.jar文件中。坦率地说，我不明白这个过程，我不知道如何让我在.vue文件中写下我的观点。

2. 使用松散连接到Play后端的单独Vue项目：
   这是我在发布此问题之前的当前展望。我想我可以使用 vue-cli 和 NPM 创建一个标准的Vue Webpack 项目，然后我可以RESTful地调用Play后端API。这个问题是分别部署后端和前端的额外复杂性。我更喜欢一个Play应用程序（项目文件夹）中的所有内容 - 后端和前端。

其中哪一个是要走的路？我也对新的建议持开放态度。对于任何建议，请解释该方法的优点，并最好提供一个最小的工作示例（Github repo就足够了）。

感谢。

Answer 1

这是一个使用Play＆amp; amp;使用WebJars的Vue.js：https://github.com/dreamhouseapp/dreamhouse-einstein-vision

请注意，该项目尚未更新到最新播放。

使用WebJars和Play的文档位于：http://www.webjars.org/documentation

Answer 2

我一直在努力实现同样的目标，并且我设法通过Play + Vue启动项目找到了一些github回购。 play-vue-webpack看起来最符合我的需求。

它将后端的Play与前端的webpack / webpack-dev-server设置结合使用.vue组件，热模块重新加载等.Webpack服务器由sbt run挂钩启动它是相当无缝的（虽然根据我的经验，使用CTRL + C停止服务器只会停止后端，我不得不单独手动停止节点进程。）

Answer 3

选择哪条路是很棘手的。这取决于你想要达到的目标。

在GIVE.asia，我们采用传统路线，在运行sbt run时，将sbt-vuefy热重新加载* .vue为* .js。

你似乎很好地捕捉了SPA的劣势;这就是我们不使用SPA的原因。

以下是我们如何将Vue.js与Playframework集成的更多信息（例如从后端发送数据到* .vue）：https://give.engineering/2018/06/05/vue-js-with-playframework.html

sbt-vuefy中的测试项目也可能为您提供更完整的图片。

我希望你觉得它很有帮助。

Answer 4

首先，我们使用了Webpack-SBT设置，例如@Tim Barclay（play-vue-webpack）建议的回购协议，尽管使用了我们自己手工制作的Webpack配置文件和SBT挂钩...这非常耗时并且需要一个好的Webpack内部知识。

因此，我们后来在原始问题中使用了选项2 ：使用一个松散地连接到Play后端的单独Vue项目。最初确实确实需要做更多的工作，但是随着代码库的增长，它比以前结合这两个代码库的方法更容易理解和维护。

Answer 5

有几种可行的解决方案可以使其正常工作：

1. 使用sbt插件。有多个sbt插件可以帮助使vuejs正常运行。对我来说，这种方法的缺点是紧密耦合。如果vue版本中的某些更改（或您要对其进行自定义）或sbt插件的作者停止支持，则可能需要很多时间来解决问题。

2. 保持前端和后端分开。您可以将webpack代理（Filter emails by domain using javamail）用于后端。无论您使用的是vuejs，angular还是react，这对您使用的任何前端库都适用。

3. 有时它需要在＃1和＃2选项之间有一些东西，例如，将CSRF令牌注入页面等。在这种情况下，您可以通过在DEV模式下进行播放简单地代理前端并在PROD中使用内置的静态资产模式。对于我来说，这是最灵活的解决方案。您可以查看它在此https://webpack.js.org/configuration/dev-server/ github项目上的工作方式