vite 命令 #

Vite 是一个现代化的前端构建工具，提供了快速的开发体验和高效的生产构建。本文档将详细介绍 Vite 的命令行接口（CLI）。

初始化项目 #

使用 npm #

bash

npm create vite@latest

使用 yarn #

bash

yarn create vite

使用 pnpm #

bash

pnpm create vite

初始化时可以指定项目名称和模板：

bash

npm create vite@latest my-vue-app -- --template vue

核心命令 #

1. 开发服务器（dev/serve） #

启动 Vite 开发服务器，支持热模块替换（HMR）。

bash

vite dev
# 或
vite serve

选项：

--host [host] - 指定主机名（默认：localhost）
--port <port> - 指定端口号（默认：5173）
--https - 使用 TLS + HTTP/2
--open - 自动打开浏览器
--mode <mode> - 指定环境模式（默认：development）
--base <path> - 指定公共基础路径

示例：

bash

# 使用特定端口和主机启动开发服务器
vite dev --port 3000 --host 0.0.0.0

# 使用 HTTPS 启动
vite dev --https

# 自动打开浏览器
vite dev --open

2. 生产构建（build） #

构建用于生产环境的应用程序，生成优化后的静态资源。

bash

vite build

选项：

--target <target> - 设置构建目标（默认：modules）
--mode <mode> - 指定环境模式（默认：production）
--base <path> - 指定公共基础路径
--outDir <dir> - 指定输出目录（默认：dist）
--assetsDir <dir> - 指定静态资源目录（默认：assets）
--sourcemap - 生成 sourcemap 文件
--minify <minifier> - 指定压缩工具（esbuild 或 terser）
--ssr - 构建用于 SSR 的服务器端渲染入口
--emptyOutDir - 清空输出目录（默认：当 outDir 在根目录下时启用）

示例：

bash

# 生成 sourcemap
vite build --sourcemap

# 指定输出目录
vite build --outDir build

# 使用 terser 进行压缩
vite build --minify terser

3. 预览生产构建（preview） #

预览生产构建的结果，用于在本地测试生产环境的应用。

bash

vite preview

选项：

--host [host] - 指定主机名
--port <port> - 指定端口号（默认：4173）
--https - 使用 TLS + HTTP/2
--open - 自动打开浏览器
--outDir <dir> - 指定输出目录（默认：dist）

示例：

bash

vite preview --port 8080

4. 依赖优化（optimize） #

预构建项目依赖，提高开发服务器的启动速度。

bash

vite optimize

选项：

--force - 强制重新优化依赖
--mode <mode> - 指定环境模式

5. 版本信息（version） #

查看 Vite 的版本信息。

bash

vite --version
# 或
vite -v

6. 帮助信息（help） #

查看 Vite CLI 的帮助信息。

bash

vite --help
# 或
vite -h

# 查看特定命令的帮助
vite dev --help
vite build --help

通用选项 #

--config <file> - 指定配置文件（默认：vite.config.js/ts）
--env-file <env> - 指定环境变量文件
--clearScreen - 清除控制台输出（默认：启用）

示例工作流 #

1. 初始化 Vue 项目 #

bash

npm create vite@latest my-vue-app -- --template vue
cd my-vue-app
npm install

2. 开发 #

bash

npm run dev

3. 构建生产版本 #

bash

npm run build

4. 预览生产构建 #

bash

npm run preview

配置文件 #

Vite 使用 vite.config.js 或 vite.config.ts 作为配置文件。你可以通过 --config 选项指定自定义配置文件。

示例配置：

javascript

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  server: {
    port: 3000,
    open: true
  },
  build: {
    outDir: 'dist',
    sourcemap: true
  }
})

更多配置选项请参考 Vite 官方文档。