Vite Plus 工具链
了解 01MVP 为什么使用 Vite Plus，以及 vp、vpr、vpx 的常见命令
01MVP 使用 Vite Plus 作为统一开发工具链。你仍然是在写 TypeScript、React、TanStack Start、Drizzle 和 pnpm workspace，只是日常命令尽量交给 vp、vpr 和 vpx 处理。
Vite Plus 官方文档在 viteplus.dev。本页讲的是 01MVP 模板里的使用方式。
为什么模板使用 Vite Plus
大型前端 monorepo 里，常见问题通常是工具太分散：Node 版本、包管理器、Vite、Vitest、lint、format、hooks、workspace 任务运行，各自都有一套命令和配置。
Vite Plus 的价值是把这些日常动作收进同一个命令面：
vp install按仓库声明的包管理器安装依赖。vp check统一做格式、lint 和静态检查。vp test使用 Vite Plus 内置的 Vitest 入口。vp dev、vp build、vp preview运行当前 app 的 Vite 开发、构建和预览。vp run/vpr运行package.json里的脚本，并理解 workspace package。vpx运行一次性 CLI，例如vpx shadcn@latest。
对 01MVP 这种 products/<product> monorepo 来说，最重要的是命令可以明确指定产品或 package，例如：
vpr @01mvp/product#dev
vpr @01mvp/web#dev
vpr @01mvp/i18n#build这样你不用先 cd 到某个目录，也不用手写很长的 package-manager filter。
三个命令入口
| 命令 | 用途 | 常见例子 |
|---|---|---|
vp | Vite Plus 内建命令 | vp install、vp check、vp test、vp build |
vpr | vp run 的短写，运行脚本 | vpr @01mvp/product#dev、vpr @01mvp/web#test |
vpx | 一次性运行 CLI | vpx shadcn@latest、vpx auth@latest secret |
vpr @01mvp/web#dev 等价于：
vp run @01mvp/web#dev也可以写成完整 filter 形式：
vp run --filter @01mvp/web dev日常手动输入时推荐 vpr @scope/package#script，CI 或长文档里可以保留 vp run --filter <package> <script>，更直观。
内建命令和脚本命令不要混用
Vite Plus 有一批内建命令，例如 vp build、vp test、vp check。这些命令不会去执行同名 package.json script。
vp build # 运行当前 app 的 Vite Plus 内建 production build
vpr build # 运行当前 package.json 里的 build script
vp run build # 和 vpr build 等价vpr @01mvp/web#build 里面确实会执行 Vite 构建，但它不是只执行 Vite 构建。它会先生成 Paraglide i18n 文件，再加载产品 env、写安全响应头、调用 vp build、复制数据库迁移文件。
因此生产构建应该跑产品脚本：
vpr @01mvp/product#build只有在你要单独执行“当前 app 的 Vite Plus 内建构建”时，才直接用 vp build。
vp preview 也属于内建命令。它会启动 Vite preview server 来预览已经存在的生产构建产物，不会自动先执行 build。通常顺序是：
vp build
vp previewstart 也依赖 build 产物，但它走的是产品自己的 Node production server。以 01MVP web 为例，vpr @01mvp/web#start 会运行 scripts/start-node.mjs，负责读取 dist/server、服务 dist/client 静态资源、挂载 SSR handler，并补上产品安全响应头。
因此两者的使用场景不同：
| 命令 | 做什么 | 适合场景 |
|---|---|---|
vp preview / vpr @01mvp/web#preview | 用 Vite preview server 预览已有 build | 本地快速看 production build |
vpr @01mvp/web#start | 用产品 Node server 启动已有 build | 本地模拟 Node 生产运行方式 |
vpr @01mvp/web#preview:cf | build 后用 Wrangler 本地预览 Worker | Cloudflare Workers 路径检查 |
如果你要预览 web 产品脚本包装过的构建结果，用：
vpr @01mvp/web#preview常见命令速查
| 目标 | 传统写法 | 01MVP 推荐写法 |
|---|---|---|
| 安装依赖 | pnpm install | vp install |
| 格式化 + lint + 静态检查 | prettier --check . && eslint . && tsc --noEmit | vp check |
| 自动修复格式和基础 lint | prettier --write . && eslint . --fix | vp check --fix |
| 运行测试 | vitest run | vp test 或 vpr @01mvp/product#test |
| 测试 watch 模式 | vitest | vp test watch |
| 覆盖率 | vitest run --coverage | vpr @01mvp/web#test --coverage |
| 启动产品开发服务器 | pnpm --filter @01mvp/product dev | vpr @01mvp/product#dev |
| 启动 Web app | pnpm --filter @01mvp/web dev | vpr @01mvp/web#dev |
| 产品生产构建 | pnpm --filter @01mvp/product build | vpr @01mvp/product#build |
| 跑某个 package 脚本 | pnpm --filter @01mvp/i18n build | vpr @01mvp/i18n#build |
| 一次性 CLI | pnpm dlx shadcn@latest / npx shadcn@latest | vpx shadcn@latest |
根目录和产品目录怎么选
从仓库根目录运行时，带上 package 名最清楚：
vpr @01mvp/product#dev
vpr @01mvp/product#test
vpr @01mvp/product#db:migrate
vpr @01mvp/web#docs:check-links进入 products/01mvp 后，可以省掉 package 名：
cd products/01mvp
vpr dev
vpr test
vpr db:migrate只改了一个 package，就直接跑那个 package 的脚本：
vpr @01mvp/api#test
vpr @01mvp/db#type-check
vpr @01mvp/i18n#syncMonorepo 任务
Vite Plus 理解 workspace package 之间的依赖关系。常见写法：
vp run -r test
vp run -t @01mvp/web#build
vp run --filter "@01mvp/*" --filter "!@01mvp/product" type-check含义：
| 写法 | 含义 | 适合场景 |
|---|---|---|
vp run -r <script> | 所有定义了这个 script 的 workspace package 都运行 | 全仓测试、全仓构建 |
vp run -t <pkg>#<script> | 运行目标 package 和它的 workspace 依赖 | 构建 app 前先构建依赖 |
vp run --filter <pkg> <script> | 选择一个或多个 package 运行脚本 | 精确验证某个产品或 package |
01MVP 的产品级脚本保留在 products/01mvp/package.json，因为数据库、i18n、部署和 E2E 都有产品语义。你可以把它理解成“产品命令中心”。
01MVP web 的 build 脚本现在会委托给 apps/web/scripts/run-web-command.mjs。package.json 里只保留短入口，真正的步骤放进脚本文件里，方便阅读和维护。
什么时候用产品脚本
下面这些任务优先用 @01mvp/product：
vpr @01mvp/product#dev
vpr @01mvp/product#build
vpr @01mvp/product#test
vpr @01mvp/product#db:generate
vpr @01mvp/product#db:migrate
vpr @01mvp/product#i18n:sync
vpr @01mvp/product#deploy:cf原因很简单：这些命令通常不只是调用一个工具，还会加载产品级 env、生成代码、处理迁移或连接特定部署平台。
下面这些任务可以直接用 Vite Plus 内建命令：
vp install
vp check
vp check --fix
vp test
vp test watch
vpx shadcn@latest常见误区
下一步
这篇文档有问题？