203 lines
4.1 KiB
Markdown
203 lines
4.1 KiB
Markdown
# 科研课题组展示网站
|
||
|
||
## 📍 访问地址
|
||
|
||
```
|
||
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/
|
||
```
|
||
|
||
## <20><> 示例项目结构
|
||
|
||
```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
|