企业官网建设流程全解析

用 Cursor 生成 React + Ant Design 公司官网，卡在 company-website 的 npm start 报错，是一件很耗额度的事。TaoToken 的统一 API 通道可以先解决这一层：打开 https://taotoken.net/?utm_source=taotoken_aicg_blog_end 注册并创建 Key，回到 Cursor 设置里把模型 Base URL 填成 https://taotoken.net/api（末尾不带 /v1，也不要加 UTM），Key 填刚创建的那串值，通道就通。通道稳了，时间才真正花在报错上——终端里那一屏红字通常只有三类：Module not found、Ant Design v5 里 Drawer 的 visible 已经改成 open、以及 package.json 缺失导致 npm start 根本找不到脚本。下面按排障顺序一个个拆，每一步都能对着自己的 company-website 目录复现。

1. npm start 一敲下去，报错先分三类

1.1 Module not found：先分清是路径问题还是依赖问题

这类报错最常见的长相是这样：

Module not found: Error: Can't resolve './components/Header' in '/Users/you/company-website/src'

注意 "in .../src" 这一段，它是定位关键。它告诉你 webpack 是从 src 目录开始找 './components/Header'，找不到。可能性有两个：一是 src/components/Header.js 这个文件确实不存在，模型当时只写了 App.js 里的引用却没把组件文件生成出来；二是文件存在但大小写不一致，比如磁盘上是 header.js，引用写成 Header，在大小写敏感的文件系统上直接失败。

另一种长相是依赖层面的：

Module not found: Can't resolve 'react-router-dom' Module not found: Can't resolve 'antd'

这跟路径无关，是 node_modules 里没装。判断方法很简单：看引号里是不是一个包名（没有 ./ 或 ../ 前缀）。是包名就去补依赖，是相对路径就去对文件。把这个区分讲清楚，后面 Cursor 给的修改建议才不会跑偏——它经常一看到 Module not found 就热心地帮你改 import 路径，而真正缺的是依赖。

1.2 Missing script 与 ENOENT：company-website 里 package.json 不在或没脚本

比 Module not found 更早翻车的是这一种：

npm ERR! Missing script: "start" npm ERR! enoent ENOENT: no such file or directory, open 'package.json'

第一种说明你在的目录里有 package.json，但 scripts 里没有 start；第二种更干脆，当前目录根本没有 package.json，你多半站错了层级——比如站在了 company-website/src 里，或者项目被生成到了 company-website/company-website 这种嵌套目录下。

还有一种伪装成依赖缺失的：

sh: react-scripts: command not found

package.json 里写了 "start": "react-scripts start"，但 node_modules 是空的或者被删过，react-scripts 没装。这种情况 npm install 比 npm start 更该先跑，顺序错了会一直以为是脚本写错了。

1.3 Drawer 的 visible 与 CSS 入口：能跑起来但页面不对

第三类不一定会让 npm start 停下，但会让页面白屏或样式全丢，终端里给的是警告：

Warning: [antd: Drawer] 'visible' is deprecated. Please use 'open' instead.

Ant Design v5 把 Drawer、Modal 这类组件的 visible 属性统一改成了 open。老教程里满屏的 visible={true}，复制到 v5 项目里就是警告加不生效。另一条是 CSS 入口：

Module not found: Can't resolve 'antd/dist/antd.css'

v5 的样式入口变了，还按 v4 的路径写就会这样报。这两条都要等你先把编译跑通，才会浮出水面，所以排障顺序不能乱。

2. 把 Cursor 的模型通道指到 TaoToken 再读报错

2.1 在 TaoToken 创建 Key，顺手确认模型 ID

排障过程要来回问模型，最怕的就是问到一半提示额度用尽、或者被要求换 Key。所以动手之前先把通道固定下来：打开 TaoToken 注册账号，进控制台创建一把 API Key，复制保存。Key 只用占位符 YOUR_API_KEY 表示，真实 Key 不要贴进任何文章、截图或提交记录里。

同一页面的模型广场要顺便看一眼，把准备在 Cursor 里用的模型 ID 记下来。具体有哪些模型、ID 长什么样，以 https://taotoken.net/?utm_source=taotoken_aicg_blog_end 上的当时列表为准，不要凭记忆写一个带日期后缀的名字，那是最容易白折腾半小时的坑。

2.2 Cursor 设置里改 Override OpenAI Base URL

打开 Cursor，进 Settings，找到 Models 面板。往下能看到 OpenAI API Key 一栏，把刚才的 Key 填进去，然后展开 Override OpenAI Base URL，填：

https://taotoken.net/api

这里有两个细节必须注意。第一，末尾不要加 /v1，客户端会自己拼具体路径；第二，不要把官网链接连同 ?utm_source=... 一起粘进来，落地页地址是给人点的，Base URL 是给程序调的，两者不要混。

填完在模型列表里 Add model，输入你记下的模型 ID，保存。Cursor 会做一次连通性校验，通过之后 Chat 和 Composer 都会走这条通道。

2.3 用一个最小请求确认通道真的通了

不要一上来就拿整个 company-website 去试，先用一条最小请求确认，出错也好看：

curl https://taotoken.net/api/v1/chat/completions \ -H "Content-Type: application/json" \ -H "Authorization: Bearer YOUR_API_KEY" \ -d '{"model":"YOUR_MODEL_ID","messages":[{"role":"user","content":"ping"}]}'

能回一段正常内容，说明 Key、Base URL、模型 ID 三件事都对上了。接着在 Cursor 里问一句最没有风险的问题，比如"解释一下 src/index.js 里 ReactDOM.createRoot 这段在做什么"，观察它是否能读到你的项目文件。两边都正常，再进入代码排障。

3. 对照 src 目录修 company-website 的 Module not found

3.1 让 Cursor 读 Header.js、index.js、App.js 的引用链

最有效的做法不是直接把报错丢过去问"怎么修"，而是给它一个明确的阅读清单。选中 src/components/Header.js、src/index.js、src/App.js 三个文件加进上下文，然后这样描述：company-website 项目 npm start 报 Module not found，请对照这三个文件的 import 与 export 语句，列出所有指向本地文件的引用，逐个判断目标文件是否存在、相对路径层级是否对得上。

Cursor 会输出一份对照结果，比如 App.js 里引了 './components/Header' 但目录里只有 Header.jsx，或者 index.js 引了 './App' 而 App.js 被生成到了上一级。这类清单必须自己再核一遍，因为模型有时会"假设"文件存在。改完之后不要急着 npm start，先跑一次 npm install。

3.2 补 package.json 和依赖，再跑 npm install

如果报错落在包名上，就打开 package.json 的 dependencies，把缺的包对一遍。用 Cursor 读 package.json 和报错日志，让它列出"代码里 import 了但 package.json 没声明"的项，比人肉翻文件快得多。补完依赖执行：

npm install npm start

npm install 结束时如果出现 ERESOLVE 之类的依赖树冲突，不要直接 --force 糊过去，先把完整输出贴回对话，让 Cursor 解释是哪两个包的 peer 版本冲突，再决定是升一个还是降一个。强制安装能骗过编译，但运行期的问题会更难查。

3.3 npm start 复验，看剩下的红字属于哪一类

npm install 成功、npm start 能起服务之后，浏览器打开本地地址，看页面是否真的渲染。这一步常见三种残留：一是编译过了但页面白屏，多半是某个组件运行时抛错，看浏览器控制台；二是样式全丢，回到第 5 节看 CSS 入口；三是抽屉、弹窗点了没反应，那就是第 4 节的 v5 属性问题。

判据很直接——终端干净但页面不对，问题在运行期；终端还在报 Module not found，问题还在依赖或路径。两类不要混在一起修。

4. Ant Design v5 里 Drawer 的 visible 要改成 open

4.1 先确认 antd 版本，再谈改法

改之前先看 package.json 里 antd 的版本号。5.x 才需要把 visible 换成 open，4.x 换过去反而会失效。可以这样向 Cursor 提问：读 company-website 的 package.json，告诉我 antd 的实际版本，并说明这个版本里 Drawer 控制显示的属性名是什么。拿到确切版本再动手，比凭印象批量替换安全。

4.2 让 Cursor 生成可核对的改动清单

让它扫一遍 src/components/Header.js 以及其他用到 Drawer、Modal 的文件，输出一份"文件 + 行号 + 旧写法 + 新写法"的清单，例如：

// Ant Design v5：抽屉的开关属性改名 <Drawer title="公司介绍" placement="right" open={drawerOpen} onClose={() => setDrawerOpen(false)} > <p>这里放导航内容</p> </Drawer>

对应的 state 名可以继续叫 drawerOpen / setDrawerOpen，只是绑定的属性名从 visible 换成 open。同时注意 v5 里 Menu 的子项也从 children 结构转向了 items 数组，如果你生成的公司官网用了菜单，顺手一起对一遍，避免改完抽屉又卡在菜单渲染。

4.3 改完再跑一次 npm start

改完保存，终端会因为热更新重新编译，警告消失、抽屉能开合就算过。如果抽屉能开但内容不显示，检查传进去的 children 是不是被条件渲染挡住了；如果控制台报 findDOMNode 相关的警告，那是升级遗留，按官方迁移文档处理即可，不影响功能时可以先记下来。

5. CSS 入口与 index.js 的 import 顺序

5.1 antd/dist/antd.css 在 v5 里的替代写法

报 Can't resolve 'antd/dist/antd.css' 的项目，基本都是按 v4 教程生成的入口。v5 的推荐做法是引入重置样式：

// src/index.js import React from 'react'; import ReactDOM from 'react-dom/client'; import 'antd/dist/reset.css'; import './index.css'; import App from './App'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( <React.StrictMode> <App /> </React.StrictMode> );

把 antd.css 那一行换掉，报错就没了。公司官网自己的全局样式，比如导航栏的高度、主色、页脚背景，放在 ./index.css 里，不要塞进 antd 的样式文件里覆盖。

5.2 import 顺序决定了谁的样式说了算

同样的选择器，后引入的规则生效。项目里比较稳的顺序是：先 antd 的 reset.css，再自己的 index.css，最后才是单个组件内部的样式文件。反过来写会出现"css 里明明写了颜色却不生效"的错觉，然后被误判成 Ant Design 的问题，白查半天。如果确实需要覆盖组件库的细节，优先用组件自带的 className 和 style 属性，硬顶 !important 会让后面的维护变难。

6. 通道报错和代码报错要分开看

6.1 Cursor 侧突然不返回内容时先查这三处

排障排到一半，Cursor 不回答了，先别怀疑代码。按顺序查：Key 是不是复制时带了空格；Base URL 是不是被写成了带 /v1 的形式；模型 ID 是不是从别处抄来的、模型广场里并没有。这三处对应的是 401、404 一类的通道问题，跟 company-website 的源码没有任何关系。改完设置重新校验一次，再回到第 2.3 节的最小请求确认通道。

6.2 代码侧还是红的：一张三行决策表

把这张表放在手边，能避免在"通道"和"代码"之间来回跳。尤其注意一种情况：通道通了但回答里引用了你项目里不存在的文件名——那是模型在补齐上下文时猜的，凡是它给出的路径，都要在本机确认一遍再改。

7. 跑通之后，去控制台对一下这次排障的花销

company-website 能正常 npm start、抽屉能开、样式回来了，这时候值得回头看一眼这次排障到底用了多少调用。用同一把 Key 去 TaoToken 模型对话 发一条测试消息，确认模型 ID 和 Base URL 没填歪；如果后面还要长期拿它写前端、改报错，可以打开 Coding Plan 看看套餐是否够用；需要再加一把 Key 分类管理时，在 控制台 API Keys 里创建最省事。真要把它接到命令行工作流里，可以对照 Claude Code 接入文档 的环境变量写法：

npm install -g @taotoken/taotoken taotoken cc -k YOUR_API_KEY -u https://taotoken.net/api -m YOUR_MODEL_ID

命令行里的 -u 只填 https://taotoken.net/api，同样不要带 /v1，也不要加任何跟踪参数。最后留个习惯：每次批量改 company-website 之前先提交一次 Git，让 Cursor 改完你还能对着 diff 逐行看。它给的文件名、属性名、依赖版本，都要落到本机确认过再算数——通道解决的是"能不能问"，代码能不能跑，靠的还是你自己那一遍核对。