企业官网建设流程全解析

如何本地运行 Front End Interview Handbook 文档网站并实时预览改动

【免费下载链接】front-end-interview-handbookFront End interview preparation materials for busy engineers (updated for 2026)项目地址: https://gitcode.com/GitHub_Trending/fr/front-end-interview-handbook

Front End Interview Handbook 是一个 monorepo：根目录存放 pnpm workspace 与vp（vite-plus）CLI 配置，website 包是基于 Docusaurus 3.1.1 构建的文档站点（内容位于website/contents与packages/*/contents下的 MDX 文件）。如果你要在本地把站点跑起来、边改内容边看页面效果，只需按项目文档执行安装、启动开发服务、验证热更新三步。website/README.md 明确要求所有命令从仓库根目录执行。

先确认项目结构与命令链路

在动手前，先对照三份文件确认命令最终落到哪里：

• package.json（根）：声明packageManager为pnpm@10.28.1，devDependencies 中包含vite-plus（即vpCLI 的来源）。
• pnpm-workspace.yaml：workspace 成员只有website，并定义了vite/vitest/vite-plus的 catalog 版本。
• website/package.json：依赖@docusaurus/core3.1.1，脚本dev与start都是docusaurus start，build是docusaurus build，deploy是docusaurus deploy。
• vite.config.ts：定义run任务，其中dev指向vp run website#dev，start指向vp run website#start，build指向vp run website#build。

也就是说，vp run dev最终执行的是 website 包里的docusaurus start，文档中所有vp命令都是这条链路的包装。

安装依赖

在仓库根目录执行：

vp install

这是 website/README.md 中 “Installation” 一节的唯一安装命令。安装对象是根目录的 workspace（含vite-plus及 website 包的 Docusaurus 依赖）。

启动开发服务并实时预览

安装完成后，仍在仓库根目录执行：

vp run dev

按照 website/README.md 的说明，这条命令会启动本地开发服务器并自动打开一个浏览器窗口；原文表述是 “Most changes are reflected live without having to restart the server”——即大多数改动无需重启服务器即可实时反映在页面上。

要验证实时预览，可以改一个文档源文件再回看页面，例如：

• 修改 website/contents/introduction.md 或 website/contents/javascript-questions.md 等任意页面内容；
• 也可以修改 website/i18n/zh-CN/docusaurus-plugin-content-docs/current/javascript-questions.md 这类中文翻译文件；
• 保存后，已打开的页面应直接更新，不需要重跑命令。若个别改动没有生效，文档只承诺 “Most changes”，未列出例外清单，此时重启vp run dev是最直接的办法。

可选：构建静态站点验证完整产物

想确认整站能完整构建，可以执行：

vp run build

根据 website/README.md，该命令会把静态内容生成到build目录，产物可以用任意静态内容托管服务来发布。构建成功即说明你本地的改动不会在发布时出结构问题。

命令对照与边界

对照关系来自 vite.config.ts 的run.tasks定义与 website/package.json 的脚本映射。deploy在 website/README.md 中要求附带环境变量GIT_USER=<Your GitHub username> USE_SSH=1，且会推送远端分支，本文只覆盖本地运行与预览，不展开部署。

另外，按 CONTRIBUTING.md，如果本地改动后续要提交，JavaScript 代码需遵循 Standard style，并在提交前运行pnpm fmt用 Oxfmt 格式化英文 markdown 和 MDX 内容。

到此可以按一条连续路径收尾：vp install→vp run dev→ 浏览器自动打开、改文件即见更新 →（可选）vp run build确认静态产物生成到build目录。文档未指定端口号与 Node 版本，遇到环境问题时以仓库中pnpm@10.28.1的packageManager声明为准。

【免费下载链接】front-end-interview-handbookFront End interview preparation materials for busy engineers (updated for 2026)项目地址: https://gitcode.com/GitHub_Trending/fr/front-end-interview-handbook