vite 常用命令

Vite 常用命令

[TOC]

## vite 常用命令

### 1. 检查是否全局安装了vite

在终端（powershelll/vs code CLI）打开使用下面得命令

```bash
vite --version
# 或者简写
vite -v
```

结果判断：

+ 能看到版本号（如 v5.4.10）→ 已全局安装
+ 提示命令不存在 / 不是内部命令 → 未全局安装

### 2. 检查是否项目安装了vite

进入你的项目根目录（必须有 package.json），运行：

```bash
npm list vite
# 或 yarn / pnpm
yarn list vite
pnpm list vite
```

结果判断：

+ 出现 vite@x.x.x → 项目里已安装
+ 出现 empty 或无版本 → 未安装

> Tips:直接查看项目的 package.json 文件：看 dependencies 或 devDependencies 里有没有 vite，有 = 已安装，没有 = 未安装

### 3. 全局安装vite

```bash
npm install -g vite
```

### 4. 项目本地安装

```bash
npm install -D vite
```

### 5. 开发测试环境启动

```bash
# 开发测试环境启动
vite
```

### 6. 项目打包

```bash
vite build #默认构建生产环境包
vite build --mode development # 构建开发环境包
vite build --mode test # 构建测试环境包
vite build --mode production  #构建生产环境包
```

### 7. 项目预览

```bash
vite preview # 浏览打包好的文件（通常时dist中的index.html文件）
```

> Tips:浏览时需要特别注意vite preview 命令默认启动的预览服务器端口是 4173，而不是 5173（5173 是 vite 开发服务器的默认端口），如果需要指定端口需要`vite.config.js`文件中配置下面内容,下面给preview指定了一个权限的端口，即不是4173也不是5173
```json
  // 添加预览服务器的配置
  preview: {
    port: 6001,      // 使用你期望的端口
    strictPort: true // 如果端口被占用则报错，避免意外
  }
```

### 8. 加载配置文件

```bash
vite --configLoader bundle
# --configLoader bundle 是 Vite 默认且最通用的配置加载模式，负责将用户的配置文件（如 vite.config.ts）打包后执行，以获取最终的配置对象
```

+ **它的核心作用可以概括为两点：**
 + **统一模块格式：**Vite 的配置文件（vite.config.js 或 vite.config.ts）可以是 ESM 或 CommonJS 格式，甚至可以包含 TypeScript 代码。bundle 模式会使用 esbuild 将这些不同格式的配置文件及其依赖打包成一个临时的 ESM 文件，从而让 Node.js 环境能够直接加载执行。
 + **提升配置加载速度：**使用性能极高的 esbuild 进行打包，能实现毫秒级的配置加载，保证开发服务器的快速启动
+ **bundle 模式的运行机制主要分为三个步骤：**
 + **文件打包：**Vite 调用内部逻辑找到配置文件后，启动 esbuild 对配置文件及其依赖的模块进行打包。
 + **生成临时文件：**打包完成后，esbuild 会生成一个临时文件，并默认存放在 node_modules/.vite-temp 目录下。
 + **执行与清理：**最后，Vite 会加载并执行这个临时文件，导出最终的配置对象，并自动清理该临时文件。

--configLoader 还有另外另种模式，下面介绍了bundle和另外两种模式的对比

> **潜在问题与解决方法**
`bundle` 模式虽然好用，但在某些特定场景下也可能带来一些困扰：
+ **Monorepo 中的 TypeScript 文件导入问题**：在 Monorepo 中，如果配置文件导入了其他使用 TypeScript 编写的本地包，`esbuild` 打包时可能因路径解析问题而失败。解决方案是改用 `--configLoader runner` 模式。
+ **调试困难**：由于配置文件被打包到 `node_modules/.vite-temp` 目录下的临时文件，VS Code 等调试器默认会排除该目录，导致无法在原始配置文件上打断点调试。解决方案是在 VSCode 的 `launch.json` 配置中，添加 `"resolveSourceMapLocations": null` 来允许调试器解析 `node_modules` 中的 source map。
+ **缓存导致的配置不生效**：当修改配置文件并期望 Vite 服务自动重启时，有时会因为缓存而未能生效。可以尝试使用 `vite --force` 命令强制优化器忽略缓存并重新构建。