如何在Golang/Gin框架模板中运行Vue应用

你需要的效果示意图如下：

以下是可直接落地的实现步骤，全程用Vite完成构建，无需复杂的webpack/babel配置：

1. 初始化Vue子项目 #

在Gin仓库根目录新建子目录存放Vue代码（比如命名为vue-modules），执行命令初始化Vue项目：

npm create vite@latest . -- --template vue
npm install

2. 调整Vue项目配置，输出单JS产物 #

修改vite.config.js配置 #

开启库模式，固定输出单index.js文件，直接构建到Gin的静态资源目录：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  base: '/static/vue-bundle/', // 静态资源路径前缀，和Gin静态路由对应
  build: {
    // 开启库模式，输出自执行JS文件
    lib: {
      entry: './src/main.js',
      name: 'VueContentApp',
      formats: ['iife'],
      fileName: () => 'index.js'
    },
    // 构建产物直接输出到Gin的静态资源目录，根据自己的目录结构调整
    outDir: '../static/vue-bundle',
    emptyOutDir: true,
    // 全量打包依赖，避免和页面原有JS产生依赖冲突
    rollupOptions: {
      external: []
    }
  }
})

修改src/main.js挂载逻辑 #

调整挂载逻辑，等待DOM加载完成后再挂载到Gin模板的content节点：

import { createApp } from 'vue'
import App from './App.vue'

window.addEventListener('DOMContentLoaded', () => {
  // 此处ID和Gin模板里content区域的ID保持一致
  const mountNode = document.getElementById('content')
  if (mountNode) {
    createApp(App).mount(mountNode)
  }
})

3. 适配Gin侧配置 #

配置静态资源路由 #

确保Gin已经配置了静态资源路由，示例如下：

func main() {
  r := gin.Default()
  // 静态资源路由，和Vite配置的路径前缀对应
  r.Static("/static", "./static")
  // 原有模板加载逻辑保持不变
  r.LoadHTMLGlob("templates/*")
  // 其他原有路由逻辑不变
  r.Run()
}

修改对应页面模板 #

在需要替换为Vue模块的页面模板中，保留原有公共布局，只需要在content区域下方引入构建好的JS文件即可：

<!-- 原有header、sidebar、footer等公共代码完全不变 -->
<div id="content">
  <!-- 原有静态CRUD内容可先保留，Vue挂载后会自动替换 -->
</div>

<!-- 原有页面的自定义JS逻辑保持不变 -->
<script src="/static/vue-bundle/index.js"></script>

4. 开发与构建流程 #

• 开发阶段：在vue-modules目录执行npm run dev调试Vue组件，功能验证完成后执行npm run build，会自动将构建产物输出到Gin的静态资源目录
• 多模块替换：如果需要替换多个页面的content区域，只需配置Vite多入口，分别输出不同名称的JS文件，对应不同模板引入即可

常见问题处理 #

• 挂载节点不存在：确保JS引入位置在content节点之后，或者保留示例中的DOMContentLoaded监听逻辑
• 全局变量冲突：Vue应用的全局变量可以通过app.config.globalProperties定义，避免和页面原有原生JS的全局变量重名
• 样式冲突：可以开启Vue组件的scoped样式，或者给Vue应用根节点加唯一类名做样式隔离

内容的提问来源于stack exchange，提问作者kaymation