Vue + Gin 一体化部署指南

✅ 静态文件服务 - 自动服务Vue打包后的静态文件
✅ Vue Router支持 - 完美支持Vue Router的history模式
✅ API代理 - 提供/api路由用于后端API
✅ 系统服务 - 支持Windows/Linux系统服务注册
✅ 开机启动 - 安装后自动开机启动

在你的Vue项目中构建生产版本：

# 在Vue项目目录中
pnpm run build

这会生成一个 dist 文件夹。

将以下文件放在同一个目录中：

your-app/
├── gin-proxy-html          # 编译后的Go程序
├── dist/               # Vue项目打包后的文件夹
│   ├── index.html
│   ├── assets/
│   │   ├── *.js
│   │   ├── *.css
│   │   └── ...
│   └── favicon.ico
└── ...

# 编译Go程序
go build -o gin-proxy-html

# 安装并启动服务
sudo ./gin-proxy-html install

# 访问应用
open http://localhost:8300

• / - Vue应用主页面
• /about、/user等 - Vue Router路由，由Vue处理
• 所有Vue路由都会返回 index.html，让Vue Router接管

• /api/info - 服务信息
• /api/health - 健康检查
• /health - 兼容性健康检查端点

• /assets/* - CSS、JS等静态资源
• /favicon.ico - 网站图标

• 端口: 8300
• 静态文件路径: ./dist (与执行文件同目录)
• 服务名: gin-web-service

如果需要自定义配置，可以修改代码中的配置部分：

config := ServiceConfig{
    Name:        "my-web-app",
    DisplayName: "My Web App",
    Description: "我的Web应用",
    Port:        "3000",           // 自定义端口
    StaticPath:  "/var/www/dist",  // 自定义静态文件路径
}

确保你的Vue项目使用history模式：

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    // 你的路由配置
  ]
})

在Vue项目中调用后端API：

// 在Vue组件中
async mounted() {
  try {
    const response = await fetch('/api/info')
    const data = await response.json()
    console.log('服务信息:', data)
  } catch (error) {
    console.error('API调用失败:', error)
  }
}

A: 确保Gin服务正确配置了Vue Router的history模式支持。代码中的 NoRoute 处理器会将所有非API请求重定向到 index.html。

A: 检查 dist 文件夹是否与执行文件在同一目录，并且包含正确的文件结构。

A: 在 api 路由组中添加新的路由：

api := r.Group("/api")
{
    api.GET("/users", getUsersHandler)
    api.POST("/users", createUserHandler)
    // 更多API路由...
}

A: 修改配置中的 Port 字段，然后重新编译和安装服务。

1. 使用反向代理 - 建议在生产环境中使用Nginx作为反向代理
2. HTTPS配置 - 配置SSL证书以支持HTTPS
3. 日志配置 - 添加适当的日志记录
4. 监控配置 - 添加性能监控和健康检查
5. 备份策略 - 定期备份应用数据

# 查看服务状态
./gin-proxy-html status

# 重启服务
sudo ./gin-proxy-html restart

# 停止服务
sudo ./gin-proxy-html stop

# 卸载服务
sudo ./gin-proxy-html uninstall

# 查看帮助
./gin-proxy-html help