pc_nuxt

奇想宇宙 PC 端站点，基于 Nuxt 4 重构，支持 SSR / SEO。

技术栈

类别	技术
框架	Nuxt 4.5 + Vue 3.5
渲染	SSR（服务端渲染，开箱即用）
样式	TailwindCSS
包管理	pnpm
语言	JavaScript（无 TypeScript）
后端	ThinkJS（ai_api / ai_server，不动）

前置条件

• Node.js >= 22.19.0（Nuxt 4.5 强制要求）
• pnpm（全局安装：npm install -g pnpm）

# 安装/切换 Node（如用 nvm-windows）
nvm install 22.19.0
nvm use 22.19.0

快速开始

# 安装依赖
pnpm install

# 启动开发服务器（监听局域网，端口 6888）
pnpm run dev
# → http://localhost:6888
# → http://<你的局域网IP>:6888

# 生产构建
pnpm run build

# 预览生产构建
pnpm run preview

目录结构

pc_nuxt/
├── app/
│   ├── app.vue                    # 根组件
│   ├── assets/css/main.css        # TailwindCSS 入口
│   ├── composables/useApi.js      # ai_api 接口封装（自动导入）
│   ├── layouts/default.vue        # 默认布局
│   └── pages/                     # 页面（文件路由）
│       └── index.vue              # 首页
├── server/api/[...].js            # 服务端 API 代理 → ai_api
├── nuxt.config.js                 # Nuxt 4 配置
├── package.json
└── pnpm-lock.yaml

项目关系

aionline/
├── pc_nuxt/         ← 本仓库（PC 端 Nuxt 4 重构）
├── ai_api/          ← 主 API 后端（ThinkJS，不修改）
├── ai_server/       ← AI 能力后端（ThinkJS，不修改）
├── pc/              ← 原 PC 端（Vue2 + Webpack4，逐步废弃）
├── m/               ← 移动端 H5
├── ai_admin/        ← 管理后台
├── ai_uniapp/       ← 跨端应用
└── ws/              ← 设备管理

各子项目相互独立，不共享 node_modules。

对接后端

接口封装：useApi()

const api = useApi()

// GET 请求
const res = await api.get('/user/info', { id: 1 })
// res = { code: 0, data: {...}, list: [...], msg: 'ok' }

// POST 请求（自动转 x-www-form-urlencoded）
const res = await api.post('/user/login', { username, password })

响应约定（沿用 ThinkJS）

code	含义
0	成功，数据在 data / list 字段
1000	业务异常，错误信息在 msg
1009	登录失效，客户端自动跳转 /login

配置后端地址

# 环境变量（优先级最高）
API_BASE=http://192.168.1.100:8360 pnpm run dev

# 或直接修改 nuxt.config.js 中的 runtimeConfig.public.apiBase

服务端代理

前端调 /api/** 会自动代理到 ai_api，路径示例：

$fetch('/api/user/info')
→ server/api/[...].js 代理转发
→ http://localhost:8360/user/info（自动附带 cookie）

约定

• 纯 JS：不用 TypeScript，.vue 文件使用 <script setup>
• SEO：每个页面必须写 useSeoMeta() 设置 title / description
• 样式：统一用 TailwindCSS utility class，避免写裸 CSS
• 就近一致：复用 composables / 组件，不引入功能重复的新库
• 端口 6888：开发服务器，监听所有网口（支持局域网访问）