# 科研课题组展示网站

## 📍 访问地址

```
https://amiap.hzau.edu.cn/group/
```

## 🎨 Vue 项目配置（重要！）

### 1. Vue Router 配置

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

const router = createRouter({
  // ⚠️ 重要：base 设置为 /group/
  history: createWebHistory('/group/'),
  routes: [
    {
      path: '/',  // 实际访问: https://amiap.hzau.edu.cn/group/
      name: 'Home',
      component: () => import('@/views/Home.vue')
    },
    {
      path: '/members',  // 实际访问: https://amiap.hzau.edu.cn/group/members
      name: 'Members',
      component: () => import('@/views/Members.vue')
    }
  ]
})

export default router
```

### 2. Vite 配置

```javascript
// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  // ⚠️ 重要：base 设置为 /group/
  base: '/group/',
  build: {
    outDir: 'dist',
    assetsDir: 'assets'
  }
})
```

### 3. Vue CLI 配置（如果使用 Vue CLI）

```javascript
// vue.config.js
module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/group/' : '/',
  outputDir: 'dist'
}
```

## 🚀 部署步骤

### 1. 构建 Vue 项目

```bash
# 在你的 Vue 项目根目录
cd your-vue-project

# 确保已配置 base: '/group/'
# 然后构建
npm run build

# 或
pnpm build
```

### 2. 复制构建产物

```bash
# 复制 dist 目录到部署位置
cp -r dist /vol1/1000/docker_server/traefik/web/group-site/
```

### 3. 启动服务

```bash
cd /vol1/1000/docker_server/traefik/web/group-site

# 启动
docker compose up -d

# 查看日志
docker compose logs -f
```

### 4. 访问网站

```
https://amiap.hzau.edu.cn/group/
```

## 📊 完整路由规划

```
https://amiap.hzau.edu.cn/
├── /                    → MinIO S3 API + 控制台（根路径）
│   ├── /stub/           → S3 bucket 访问
│   ├── /api/v1/         → MinIO Console API
│   └── /static/         → MinIO Console 静态资源
│
├── /group/              → 科研课题组网站（你的 Vue 项目）
│   ├── /group/          → 首页
│   ├── /group/members   → 成员介绍
│   ├── /group/research  → 研究方向
│   └── /group/...       → 其他页面
│
├── /supa/               → Supabase API
└── /ABM/                → ABM 数据库
```

## 🔧 开发调试

### 本地开发

```bash
# 在 Vue 项目中本地运行
npm run dev

# Vite 会自动处理 /group/ base path
# 访问: http://localhost:5173/group/
```

### 生产环境测试

```bash
# 构建生产版本
npm run build

# 预览
npm run preview
# 访问: http://localhost:4173/group/
```

## �� 示例项目结构

```javascript
// App.vue
<template>
  <div id="app">
    <nav>
      <\!-- 路由链接会自动加上 /group/ 前缀 -->
      <router-link to="/">首页</router-link>
      <router-link to="/members">团队成员</router-link>
      <router-link to="/research">研究方向</router-link>
    </nav>
    <router-view />
  </div>
</template>

// 图片引用示例
<template>
  <img src="@/assets/logo.png" alt="Logo">
  <\!-- Vite 会自动处理为: /group/assets/logo-xxx.png -->
</template>
```

## ⚠️ 常见问题

### Q: 刷新页面出现 404
A: 已在 nginx.conf 中配置 `try_files`，支持 Vue Router History 模式

### Q: 静态资源加载失败
A: 确保 Vite/Vue CLI 配置了正确的 `base: '/group/'`

### Q: 路由跳转到根路径
A: 检查 Vue Router 的 `history: createWebHistory('/group/')`

### Q: API 请求路径错误
A: 使用绝对路径或相对路径，例如：
```javascript
// 调用 Supabase API
fetch('https://amiap.hzau.edu.cn/supa/rest/v1/...')

// 或使用环境变量
const API_BASE = import.meta.env.VITE_API_URL
```

## 🔗 相关资源

- [Vue Router Base 配置](https://router.vuejs.org/guide/essentials/history-mode.html#html5-mode)
- [Vite Base 配置](https://vitejs.dev/config/shared-options.html#base)
- [主项目文档](../../README.md)

---

**部署路径**: `/group/`  
**优先级**: 80（高于 MinIO S3 的 50）  
**维护者**: Lab Admin