VitePress 命令行接口(CLI)完整参考:dev / build / preview / init 命令实战指南 📅 发布时间:2026/9/21 2:15:48 👁 浏览次数: 前端文档【免费下载链接】vitepressVite Vue powered static site generator.项目地址https://gitcode.com/gh_mirrors/vi/vitepress点击查看免费下载本篇指南基于 VitePress 官方文档 命令行接口参考 展开系统讲解vitepress dev、vitepress build、vitepress preview与vitepress init四个核心命令的用法、选项参数与底层实现原理。读完本文你将掌握本地开发、生产构建、产物预览与项目初始化四条完整工作流并能结合 src/node/cli.ts 的源码理解每个命令背后的解析与执行逻辑。VitePress 的所有 CLI 命令都通过bin字段注册为vitepress可执行文件见 package.json默认以当前目录作为站点根目录。命令行入口 src/node/cli.ts 使用minimist解析参数并将形如--force的布尔参数从字符串true/false归一化为真正的布尔值再根据第一个位置参数分发到dev、init、build、serve/preview四个分支。命令总览命令作用常用场景vitepress dev可省略启动开发服务器本地编写与预览文档vitepress build构建生产版本部署前的静态产物生成vitepress preview别名serve本地预览生产构建产物验证构建结果、检查 base 路径vitepress init交互式安装向导初始化新站点脚手架其中vitepress与vitepress dev等价在 src/node/cli.ts 中当command为空或为dev时都会进入开发服务器启动分支。serve是preview的兼容别名两者在 src/node/cli.ts 中走同一执行路径。vitepress dev启动开发服务器使用指定目录作为根目录启动 VitePress 开发服务器默认根目录为当前目录。用法# 从当前目录启动dev 可省略 vitepress # 从子目录启动 vitepress dev [root] # 例如 vitepress dev docs当省略dev直接运行vitepress时第一个位置参数即被解释为根目录源码中的对应逻辑为const root argv._[command ? 1 : 0]src/node/cli.ts。选项选项说明--open [path]启动时打开浏览器boolean \| string。不带值则打开默认页面带值可指定路径--port port指定端口number默认由 Vite 自动选择可用端口--base pathpublic base URL默认值/string--cors启用 CORS便于跨域调试--strictPort若指定端口已被占用则直接退出boolean而非自动换端口--force强制优化程序忽略缓存并重新绑定boolean源码实现与快捷键--force选项在 CLI 入口被转换为optimizeDeps: { force: true }传入 Vitesrc/node/cli.ts用于清除依赖预构建缓存。开发服务器通过 createServer 创建其内部将srcDir作为 Vite 根目录、把site.base作为 Vite base并挂载由 createVitePressPlugin 生成的一组插件rewrites、Vue 编译、web fonts、assetsBase、icons、local search、静态数据与动态路由等。vitepress dev启动后支持终端快捷键由 shortcuts.ts 注册仅在交互式 TTY 且非 CI 环境下生效按键功能h显示快捷键帮助r重启开发服务器会重新解析配置、清理 Markdown 编译缓存u显示服务器地址o在浏览器中打开站点c清空控制台q或CtrlC/CtrlD退出并关闭服务器配置项.vitepress/config或相关依赖文件变更时服务器会自动重启见 plugin.ts 的hotUpdate处理。vitepress build构建生产版本执行生产环境构建产出可直接部署的静态站点。用法vitepress build [root]选项选项说明--mpa实验性以 MPA 模式 构建无客户端激活boolean。开启后每个页面独立加载需在.vitepress/config中同时设置mpa: true以获得完整效果--base pathpublic base URL默认值/string。构建时传入会被normalizeSiteBase规范化src/node/build/build.ts例如--base /docs/--target target转译目标默认值modulesstring透传给底层打包器--outDir dir输出目录默认值.vitepress/diststring。CLI 传入的路径会以process.cwd()为基准解析为绝对路径src/node/build/build.ts--assetsInlineLimit number静态资源 base64 内联阈值字节默认值4096number。小于该值的资源会以内联形式嵌入产物构建流程构建入口 build 的执行步骤为设置NODE_ENV production并解析站点配置依次处理--base、--assetsBase、--mpa、--outDir等命令行覆盖项并行构建客户端与服务端SSRbundlebuilding client server bundles逐页渲染 HTMLrendering pages并清理临时目录若配置了sitemap.hostname最后生成sitemap.xml见 generateSitemap.ts。输出目录由 config.ts 解析默认outDir为root/dist即.vitepress/dist静态资源子目录assetsDir默认assets且assetsDir不允许超出outDir范围。vitepress preview本地预览生产版本在本地启动一个静态服务器预览vitepress build的产物用于上线前检查最终效果。用法vitepress preview [root]preview与serve是同一命令的两种写法二者在 src/node/cli.ts 中共同路由到 serve。选项选项说明--base pathpublic base URL默认值/string--port port指定端口number默认4173实现要点预览服务器基于polka sirv实现src/node/serve/serve.ts关键行为包括默认端口为 4173src/node/serve/serve.ts读取outDir下的静态产物对带指纹的静态资源设置immutable长缓存对不带指纹的 HTML 等文件设置no-cache强制校验src/node/serve/serve.ts相对 baseisRelativeBase统一在根路径提供服务绝对 URL base 则取其 pathnamesrc/node/serve/serve.ts未匹配路径回落到构建产物中的404.htmlsrc/node/serve/serve.ts可据此验证自定义 404 页面。vitepress init交互式安装向导在当前目录启动交互式向导快速初始化 VitePress 站点。用法vitepress init向导步骤向导基于clack/prompts实现init.ts依次询问配置初始化目录默认./Markdown 源文件目录默认与根目录相同站点标题默认My Awesome Project站点描述默认A VitePress Site主题类型Default Theme开箱即用的默认主题Default Theme Customization额外生成自定义 CSS 与布局插槽Custom Theme生成完整自定义主题骨架含Layout.vue是否使用 TypeScript 编写配置与主题文件是否向package.json注入 npm scriptsdev/build/preview是否给脚本添加前缀默认前缀docs即生成docs:dev等。生成的脚手架文件因主题类型而异init.ts默认主题生成index.md、api-examples.md、markdown-examples.md与.vitepress/config.js选择自定义主题还会追加.vitepress/theme/index.js、style.css与Layout.vue。若package.json中缺少vue依赖且选择了自定义主题向导会提示显式安装vue如果检测到.git目录还会提醒将.vitepress/dist与.vitepress/cache加入.gitignoreinit.ts。向导结束后会打印下一步命令例如npm run docs:dev注入脚本时或npx vitepress dev未注入脚本时。常见组合工作流将上述命令串联起来便是一条完整的文档站点生命周期# 1. 初始化站点仅首次 vitepress init # 2. 本地开发 vitepress dev docs # 或 npm run docs:dev # 3. 构建生产产物 vitepress build docs # 输出到 docs/.vitepress/dist # 4. 本地验证产物 vitepress preview docs --port 8080 # 5. 部署时指定 base 与输出目录 vitepress build docs --base /my-site/ --outDir ./public如果构建或启动过程中出现错误CLI 会通过logErrorAndExit打印错误信息并以非零状态码退出src/node/cli.ts对于未知命令同样会报错退出src/node/cli.ts。相关文档与源码索引命令官方参考docs/zh/reference/cli.md另有 英文版 及 es/fa/ja/ko/pt/ru/zh 多语言版本CLI 入口与命令分发src/node/cli.ts开发服务器创建src/node/server.ts生产构建主流程src/node/build/build.ts预览服务器实现src/node/serve/serve.ts安装向导实现src/node/init/init.ts终端快捷键src/node/shortcuts.tsMPA 模式指南docs/zh/guide/mpa-mode.md快速上手含安装向导说明docs/zh/guide/getting-started.md赞分享前端文档【免费下载链接】vitepressVite Vue powered static site generator.项目地址https://gitcode.com/gh_mirrors/vi/vitepress点击查看免费下载相关推荐VuePress 命令行接口CLI完全指南dev、build、eject 与自定义命令实战VuePress 命令行接口CLI完全指南dev、build、eject 与自定义命令实战 本文档系统讲解 VuePress 的命令行接口CLI覆盖前端文档SSRWails CLI工具完全指南init、build、dev命令详解Wails CLI工具完全指南init、build、dev命令详解 Wails是一个强大的Go框架用于使用Web技术构建跨平台桌面应用程序。本文将深入解析W桌面应用跨平台CLI前端Nitro CLI 完全指南dev / build / preview / deploy / task / docs 命令详解Nitro CLI 完全指南dev / build / preview / deploy / task / docs 命令详解 Nitro 随项目自带一个 n后端Web框架SSR上一篇任天堂Switch模拟器调试终极指南GDB与LLDB在yuzu核心模块的高效使用下一篇如何用Penpot实现完美移动适配响应式设计与移动端优化全指南创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考