科研课题组展示网站
📍 访问地址
https://amiap.hzau.edu.cn/group/
🎨 Vue 项目配置（重要！）
1. Vue Router 配置
// 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 配置
// 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）
// vue.config.js
module.exports = {
publicPath: process.env.NODE_ENV === 'production' ? '/group/' : '/',
outputDir: 'dist'
}
🚀 部署步骤
1. 构建 Vue 项目
# 在你的 Vue 项目根目录
cd your-vue-project
# 确保已配置 base: '/group/'
# 然后构建
npm run build
# 或
pnpm build
2. 复制构建产物
# 复制 dist 目录到部署位置
cp -r dist /vol1/1000/docker_server/traefik/web/group-site/
3. 启动服务
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 数据库
🔧 开发调试
本地开发
# 在 Vue 项目中本地运行
npm run dev
# Vite 会自动处理 /group/ base path
# 访问: http://localhost:5173/group/
生产环境测试
# 构建生产版本
npm run build
# 预览
npm run preview
# 访问: http://localhost:4173/group/
<EFBFBD><EFBFBD> 示例项目结构
// 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: 使用绝对路径或相对路径，例如：
// 调用 Supabase API
fetch('https://amiap.hzau.edu.cn/supa/rest/v1/...')
// 或使用环境变量
const API_BASE = import.meta.env.VITE_API_URL
🔗 相关资源
部署路径: /group/
优先级: 80（高于 MinIO S3 的 50）
维护者: Lab Admin