在 Play 框架应用程序中使用 Vue.js答案

【问题标题】：Using Vue.js in a Play Framework Application在 Play 框架应用程序中使用 Vue.js
【发布时间】：2017-10-11 18:51:21
【问题描述】：

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

我当前的设置是一个 Play 应用程序（Java 中），其中包含用于处理 REST 请求的模型、控制器和 DAO——这实际上是我的后端。 Now Play 还允许您使用 Twirl 模板库来创建可用作静态 HTML 的视图。但是，我发现 Twirl 语法不必要地复杂且难以为单页应用程序编写视图。我更喜欢为 UI 工作使用更精细的东西，比如 Vue

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

使用 Webjars：
它是某种 Play 插件，将 JavaScript 库（如 JQuery）捆绑到可由 Play 部署的 .jar 文件中。坦率地说，我不明白这个过程，我不知道这会让我在.vue 文件中写下我的观点。
使用松散连接到 Play 后端的单独 Vue 项目：
这是我在发布此问题之前的当前观点。我想我可以使用 vue-cli 和 NPM 创建一个标准的 Vue Webpack 项目，然后我可以 RESTfully 调用 Play 后端 API。这样做的问题是分别部署后端和前端的额外复杂性。我更喜欢一个 Play 应用程序（项目文件夹）中的所有内容——后端和前端。

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

谢谢。

【问题讨论】：

您可以设置 sbt 任务来构建您的 vue 项目并将文件复制到 assets 文件夹

标签： playframework vue.js frontend webjars twirl

【解决方案1】：

这是一个使用 Play & Vue.js 和 WebJars 的项目：https://github.com/dreamhouseapp/dreamhouse-einstein-vision

请注意，该项目尚未更新到最新的 Play。

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

【讨论】：

感谢您的链接，但是，它并没有解决我对使用 Webjars 的担忧——您如何通过此设置在 .vue 文件中使用组件？您提供的 repo 仅在 index.scala.html 文件中显示了一个 Vue 组件（违背了模块化的整个目标）。
看起来.vue 文件需要 Webpack 或 Browserify 来转换/加载它们。这些工具仅适用于 Node.js。因此，除非有人为他们创建了 sbt 插件，否则您将无法将它们与 Play / 其他基于 sbt 的工具一起使用。
你可以在你的根项目下创建 vue 子项目，并像使用普通 node/webpack 项目一样工作，代理对后端的请求，然后编写 sbt 任务来构建 vue 项目，然后将整个 play 项目构建到某个地方的目标文件夹在公共文件夹中。那是在你需要 SPA 的情况下，但如果你只包含 vue 的部分界面，就没有办法让它像那样工作（我想只有 webjars）

【解决方案2】：

我一直在尝试实现同样的目标，并且我设法找到了一些带有 Play + Vue 入门项目的 github 存储库。 play-vue-webpack 看起来最适合我的需求。

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

【讨论】：

【解决方案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 中的测试项目也可能会给你一个更完整的画面。

希望对您有所帮助。

【讨论】：

使用 sbt-vuefy 的有趣方法。这对 SSR 来说确实非常方便，但在我从事相关项目的时候，我们完全想要一个 SPA，所以我们选择了类似接受的答案。

【解决方案4】：

首先，我们使用了 Webpack-SBT 设置，就像 @Tim Barclay (play-vue-webpack) 建议的 repo，尽管使用我们自己手工制作的 Webpack 配置文件和 SBT 钩子......这非常耗时并且需要很好的知识Webpack 内部结构。

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

【讨论】：

除此之外，我认为值得强调将事物分离为单独的微服务的主要好处之一——利益隔离。将所有东西都保存在一个大仓库中是很糟糕的，原因有很多：代码很难维护，如果有什么东西破坏了整个服务，而不仅仅是其中的一小部分，测试单个微服务要简单得多（根据我的经验）.. .imo，虽然在不同的端口上运行多个东西可能很烦人，但从长远来看，它让我的生活变得更加简单。

【解决方案5】：

有几种可能的解决方案可以让它发挥作用：

使用 sbt 插件。有多个 sbt 插件可以帮助 vuejs 工作。对我来说，这种方法的缺点是紧耦合。如果 vue build 发生变化（或者你想自定义它）或者 sbt 插件的作者停止支持，解决问题可能需要很多时间。
保持前端和后端分开。您可以使用 webpack 代理 (https://webpack.js.org/configuration/dev-server/) 作为后端。这适用于您使用的任何前端库，无论您是 vuejs、angular 还是 react。

https://github.com/SunPj/silhouette-vuejs-app

【讨论】：