aitsc/vue-app

提示词大师 · Vue 3 试验田

与仓库根目录 Flask 应用并行开发，按 vue重构方案.md 分阶段迁移前端。

技术栈

Vue 3、Vite、TypeScript、Vue Router、Pinia、Axios、Element Plus、Sass。

本地开发

1. 启动 Flask（默认示例端口 5002，与 vite.config.ts 代理一致）
2. 在本目录执行：

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（同域可留空）。

构建

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/... 重复前缀。

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	文档标题前缀