96 lines
3.8 KiB
Markdown
96 lines
3.8 KiB
Markdown
|
# 提示词大师 · Vue 3 试验田
|
|||
|
|
|
|||
|
|
与仓库根目录 Flask 应用并行开发，按 `vue重构方案.md` 分阶段迁移前端。
|
|||
|
|
|
|||
|
|
## 技术栈
|
|||
|
|
|
|||
|
|
Vue 3、Vite、TypeScript、Vue Router、Pinia、Axios、Element Plus、Sass。
|
|||
|
|
|
|||
|
|
## 本地开发
|
|||
|
|
|
|||
|
|
1. 启动 Flask（默认示例端口 **5002**，与 `vite.config.ts` 代理一致）
|
|||
|
|
2. 在本目录执行：
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
npm install
|
|||
|
|
npm run dev
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
3. 浏览器打开 **http://127.0.0.1:3000**（建议与后端同为 `127.0.0.1`，便于 Cookie 会话）。
|
|||
|
|
|
|||
|
|
`npm run dev` 会自动加载 `.env.development`。API 使用**相对路径** `/api/*`，由 Vite 转发到 Flask；Axios 已开启 `withCredentials: true` 以携带会话 Cookie。
|
|||
|
|
|
|||
|
|
## 当前试点
|
|||
|
|
|
|||
|
|
- **首页**：说明与跳转
|
|||
|
|
- **生成**（`/generate`）：场景 Tab、筛选、模板选择、需求输入；对接 `GET /api/generate/meta`、`GET /api/templates/<分类>`、`POST /api/prompt/generate`；结果可 **加入收藏**（`POST /api/favorites/quick-add`）
|
|||
|
|
- **收藏**（`/favorites`）：`GET/DELETE /api/favorites`
|
|||
|
|
- **登录 / 注册**（`/login`、`/register`）：`POST /api/login`、`POST /api/register`、`POST /api/logout`，会话 Cookie 与经典站共用（同域代理下）
|
|||
|
|
- **优化历史**（`/history`）：`GET/DELETE /api/history`（后端已优先使用 Session `user_id`）
|
|||
|
|
- **个人资料**（`/profile`）：`GET/PUT /api/profile`，需登录（路由守卫跳转登录）
|
|||
|
|
|
|||
|
|
经典 SSR 生成页可通过顶部导航 **「更多」→ 经典版生成页** 跳转；外链依赖 `VITE_FLASK_ORIGIN`（同域可留空）。
|
|||
|
|
|
|||
|
|
## 构建
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
npm run build
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
产物在 `dist/`，由 Nginx 托管静态文件，并把 `/api`、`/poetry`、`/static` 反代到 Flask（见下节）。
|
|||
|
|
|
|||
|
|
## 生产部署（Nginx 示例）
|
|||
|
|
|
|||
|
|
假设 Flask 监听 `127.0.0.1:5002`，Vue 构建产物在 `/var/www/prompt-vue/dist`。要点：
|
|||
|
|
|
|||
|
|
1. **SPA 回退**：`try_files` 落到 `index.html`，否则 Vue Router 刷新 404。
|
|||
|
|
2. **必须反代的路径**：`/api/`（REST）、`/poetry/`（古诗词蓝图，不在 `/api` 下）、`/static/`（Flask 静态资源）。
|
|||
|
|
3. **Cookie 会话**：前后端同域时，Axios 已 `withCredentials: true`，一般无需改 `SESSION_COOKIE_DOMAIN`。
|
|||
|
|
4. **`VITE_API_BASE_URL`**：同域部署请**留空**（见 `.env.production`），否则易出现 `/api/api/...` 重复前缀。
|
|||
|
|
|
|||
|
|
```nginx
|
|||
|
|
server {
|
|||
|
|
listen 80;
|
|||
|
|
server_name your-domain.com;
|
|||
|
|
root /var/www/prompt-vue/dist;
|
|||
|
|
index index.html;
|
|||
|
|
|
|||
|
|
location / {
|
|||
|
|
try_files $uri $uri/ /index.html;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
location /api/ {
|
|||
|
|
proxy_pass http://127.0.0.1:5002;
|
|||
|
|
proxy_http_version 1.1;
|
|||
|
|
proxy_set_header Host $host;
|
|||
|
|
proxy_set_header X-Real-IP $remote_addr;
|
|||
|
|
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
|||
|
|
proxy_set_header X-Forwarded-Proto $scheme;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
location /poetry/ {
|
|||
|
|
proxy_pass http://127.0.0.1:5002;
|
|||
|
|
proxy_http_version 1.1;
|
|||
|
|
proxy_set_header Host $host;
|
|||
|
|
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
|||
|
|
proxy_set_header X-Forwarded-Proto $scheme;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
location /static/ {
|
|||
|
|
proxy_pass http://127.0.0.1:5002;
|
|||
|
|
proxy_http_version 1.1;
|
|||
|
|
proxy_set_header Host $host;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
若将 API 部署在**另一子域**（如 `api.example.com`），再在构建时把 `VITE_API_BASE_URL` 设为 `https://api.example.com`，且需在 Flask 配置 CORS 与 `SESSION_COOKIE_SAMESITE` 等，复杂度更高；推荐首发生产用同域反代。
|
|||
|
|
|
|||
|
|
## 环境变量
|
|||
|
|
|
|||
|
|
| 变量 | 说明 |
|
|||
|
|
|------|------|
|
|||
|
|
| `VITE_API_BASE_URL` | **同域反代时留空**；仅当 API 在另一 origin 时设为完整根 URL（且接口路径不能再带重复 `/api` 前缀） |
|
|||
|
|
| `VITE_FLASK_ORIGIN` | 经典版站点 origin（「更多」→ 经典版）；与 Vue 同域可留空 |
|
|||
|
|
| `VITE_APP_TITLE` | 文档标题前缀 |
|