时间戳

首页 > 解决方案 > 在 Golang/Gin 模板中运行 Vue 应用程序

javascript - 在 Golang/Gin 模板中运行 Vue 应用程序

问题描述

我专门运行 Vue 和 Golang/Gin，但这个问题可以更广泛地视为“在 Web 框架的模板流中运行 JS 框架”

我的任务是将一家初创公司有些复杂的 Golang/Gin 应用程序转换为更现代的 Web 应用程序。由于这些事情通常会发生，Gin 应用程序过于复杂，无法通过 API 直接转换为 SPA，因此我们必须逐个扼杀各个功能。与大多数网站一样，The Gin 应用程序的 HTML 页面都具有相同的页眉、页脚和侧边栏布局，“内容”区域在页面之间变化。内容区域通常是静态 CRUD 的东西，但是在许多视图中混入了大量的自定义 vanilla JS，这在尝试合并现代 JS 框架时会有点麻烦。

我想做的是在那个“内容”div 中运行一个 Vue 应用程序，这看起来很简单，但事实证明这对我来说有点挑战。我将所有视图代码保存在 Gin 存储库的子目录中，因为我不希望应用程序代码和构建管道与现有的 vanilla JS 资产冲突默认情况下，Vue 应用程序构建到 index.html 文件，所以我尝试了只是将它作为模板包含在内，go Gin 不喜欢它，并一直给我一个找不到模板的错误

我认为最好的解决方案可能是将我的 Vue 应用程序编译为 index.js 文件，该文件通过 ID 定位模板中的元素，并在那里运行 Vue 应用程序。然后我可以简单地将该 JS 文件包含在模板的脚本标记中。

让我退缩的是，我对webpack/babel/JS构建管道有点不知所措，所以我不确定我应该如何实现这一目标，或者我应该使用什么工具来实现它。我一直在研究“vue-loader”，这似乎至少部分是我想要的（将 Vue 转换为纯 JS），但我仍然有些摸不着头脑。

任何帮助表示赞赏。我试图在这里尽可能清楚地了解我的问题，但很高兴回答任何后续问题。附件是我想要完成的视觉帮助。谢谢你，编码愉快！

这是一张图表，显示了我想做的事情

我要完成的工作：
在此处输入图像描述

标签： javascriptvue.jsgowebpackbabeljs

解决方案

能够通过使用 vue-loader 和 webpack 使其工作，将我的应用程序编译为单个index.js文件，其入口点如下所示：

import Vue from 'vue'
import App from './App.vue'

new Vue({
  render: h => h(App),
}).$mount('#webapp')

然后在这样的模板中调用：

<div id="webapp">Failed to load Vue</div>

<script src=/webapp/dist/index.js></script>

它仅在脚本标签位于 div 之后才有效，否则 Vue 将无法找到该元素。我还必须在 main.go 中添加以下内容，以便它可以读取 JS

r.Static("/webapp", "./webapp")

总而言之，最终成为一个相当简单的解决方案，配置的细节让我感到困惑！我确定我会遇到某种类型的问题，将其投入生产，但这是明天的问题

推荐阅读