前言

在 2026 年的今天，如果你的个人博客还只是单纯的文字展示，那就太落伍了！最近我在维护我的 WordPress 站点时，突发奇想：能不能利用阿里通义千问（Qwen）的强大能力，给我的读者们做一个“AI 厨房助手”？

网站：https://nanshaws.top/chef/

手机浏览更方便

不需要昂贵的域名，不需要复杂的云原生架构，只需要 Vue 3 + Nginx + PHP，就能在子目录下跑起一个极其流畅的 AI 应用。今天就把这套方案全部分享给大家！

---

一、 技术栈选型

为了保证轻量化和易维护，我选择了以下组合：

• 前端：Vue 3 (Composition API) + Tailwind CSS（响应式布局，适配手机端）。

• 后端：PHP 8.1（作为中转，保护 API Key 安全）。

• 大模型：阿里通义千问 (DashScope) - 响应快、性价比极高。

• 部署环境：Ubuntu + Nginx + WordPress 现成环境。

---

二、 核心功能亮点

1. 极简交互：类 ChatGPT 的对话流界面，采用 SVG 图标，彻底解决 Emoji 乱码问题。

2. 快捷提问：内置“红烧肉教程”、“5分钟早餐”等快捷标签，提升用户体验。

3. 安全架构：API Key 隐藏在 PHP 后端，防止前端代码泄露导致欠费。

4. SEO 友好：针对搜索引擎优化了 Meta 标签和结构化数据。

---

三、 关键代码实现

1. 后端：PHP 安全中转 (api.php)

很多小白直接在 JS 里写 Key，这是非常危险的。我们用 PHP 做一个简单的“代理”：

// 核心逻辑：接收前端消息并转发给阿里 API
$apiUrl = 'https://dashscope.aliyuncs.com/compatible-mode/v1/chat/completions'; 
$apiKey = 'YOUR_API_KEY'; // 保护你的 Key

$data = [
    'model' => 'qwen-plus',
    'messages' => [
        ['role' => 'system', 'content' => '你是一个专业的厨师助手...'],
        ['role' => 'user', 'content' => $userMessage]
    ]
];
// 使用 cURL 发起请求...

2. 前端：Vue 3 响应式界面 (index.html)

利用 Vue 3 的数据驱动特性，我们可以轻松实现自动滚动和加载状态：

const handleSend = async () => {
    messages.value.push({ role: 'user', content: text });
    isLoading.value = true;
    
    const response = await fetch('./api.php', {
        method: 'POST',
        body: JSON.stringify({ message: text })
    });
    // 解析返回并渲染...
}

---

四、 避坑指南（干货必看）

在部署过程中，我踩了几个坑，大家一定要注意：

• cURL 缺失：Ubuntu 系统下需要手动运行 sudo apt-get install php8.1-curl，否则后端会报 500 错误。

• 编码问题：一定要确保文件保存为 UTF-8 (无 BOM) 格式，否则中文和 Emoji 会变问号。

• Nginx 权限：在 WordPress 子目录下创建文件夹时，记得检查 www-data 用户的读写权限。

---

五、 结语与演示

目前这个“AI 大厨”已经部署在我的博客 nanshaws.top/chef/ 下了。欢迎大家去催更、调教。