package.json 脚本命令

Vite 项目通过 package.json 的 scripts 字段定义常用命令，理解各脚本的作用是开发的基础。

核心脚本

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}

dev 命令详解

npm run dev

# 指定端口
npm run dev -- --port 3000

# 自动打开浏览器
npm run dev -- --open

# 指定主机
npm run dev -- --host

开发服务器启动后支持热更新（HMR），修改代码即时生效。

build 命令详解

npm run build

# 指定模式
npm run build -- --mode staging

# 指定输出目录
npm run build -- --outDir dist-staging

构建产物输出到 dist 目录，包含优化后的静态资源。

preview 命令详解

npm run preview

# 指定端口
npm run preview -- --port 4173

preview 启动一个静态服务器，模拟生产环境运行构建产物。

注意：preview 需先执行 build，否则 dist 目录不存在。

执行流程

开发流程: npm run dev → 编写代码 → 热更新即时生效

部署流程: npm run build → 生成 dist → npm run preview 验证 → 部署 dist

要点总结

• dev 启动开发服务器，支持热更新
• build 执行生产构建，输出到 dist
• preview 预览构建产物，验证部署效果
• 命令可通过 --参数 传递选项