# Nuxt + Vite + PurgeCSS 配置

URL: https://caijiao.org/posts/13
Source: docs/posts/13.md
Description: 介绍如何在 Nuxt 项目中使用 Vite 和 vite-plugin-purgecss 移除未使用的 CSS

在使用 Nuxt 3 搭配 Vite 的项目中，有时候会生成大量未使用的 CSS 文件，这会增加打包体积。为了优化性能，可以使用 [`vite-plugin-purgecss`](https://www.npmjs.com/package/vite-plugin-purgecss) 自动移除未使用的 CSS。

## 安装

```bash
npm install vite-plugin-purgecss -D
# 或者使用 yarn
yarn add vite-plugin-purgecss -D
````

## 配置示例

在 `nuxt.config.ts` 中添加 Vite 插件；如果你还不熟悉 TS 配置文件，可以先了解 [TypeScript](/ts/) 的基础写法：

```ts
import purgeCss from "vite-plugin-purgecss";

export default defineNuxtConfig({
  vite: {
    plugins: [purgeCss()],
  },
});
```

### 配置说明

* `purgeCss()`：默认会扫描你的项目文件，自动删除没有使用的 [CSS](/css/) 类。
* 配置项可自定义，例如指定扫描路径或保留特定类名。

```ts
purgeCss({
  content: [
    './components/**/*.vue',
    './layouts/**/*.vue',
    './pages/**/*.vue',
    './plugins/**/*.ts',
  ],
  safelist: ['html', 'body'], // 保留不被删除的类名
})
```

## 优势

1. 减少最终打包的 CSS 文件大小。
2. 提高页面加载速度。
3. 自动化处理，不用手动去管理 CSS。

## 注意事项

* 确保插件只在生产环境使用，否则可能会删除开发时动态添加的类。
* 对于动态生成的类名（如 `v-bind:class`）需要加入 `safelist`。

---

通过以上配置，你的 Nuxt 项目在使用 Vite 打包时可以有效减少未使用 CSS，从而提升性能和加载速度。

> 相关文章：[Vite + PurgeCSS 与 Vue 动态类名问题](/posts/17)