- 概述 在当今的前端开发领域，构建工具已经成为项目开发不可或缺的一部分。随着项目的复杂性增加，对构建工具的要求也越来越高。Vite，作为新一代的前端构建工具，以其闪电般的冷启动速度和高效的热更新能力，受到了广大开发者的欢迎。本文将带你从入门到精通，掌握Vite的使用，玩转新时代前端构建法则。
//下栽の客↓ ↓ ↓ ↓背景水印
- Vite 入门
- 1 安装 Vite 要开始使用 Vite，首先需要安装 Node.js。确保 Node.js 版本 >= 12.0.0。然后，使用 npm 或 yarn 安装 Vite。
bash
使用 npm 安装 Vite
npm install -g create-vite
使用 yarn 安装 Vite
yarn global add create-vite 2.2 创建 Vite 项目 使用 Vite 提供的脚手架工具创建一个新项目。
bash
创建一个 Vue 项目
npm init vite@latest my-vue-app --template vue
创建一个 React 项目
npm init vite@latest my-react-app --template react
创建一个 vanilla 项目（无框架）
npm init vite@latest my-vanilla-app --template vanilla 2.3 运行项目 进入项目目录，并运行项目。
bash
cd my-vue-app npm install npm run dev 此时，Vite 将启动一个本地开发服务器，默认地址为 http://localhost:3000。
- Vite 进阶
- 1 配置 Vite Vite 支持多种配置方式，可以通过 vite.config.js 文件进行配置。例如，配置代理、环境变量、插件等。
javascript
// vite.config.js import { defineConfig } from 'vite' export default defineConfig({ // 配置项... }) 3.2 使用插件 Vite 插件是 Vite 生态的重要组成部分，可以通过插件来实现各种功能，如打包优化、代码拆分等。安装并使用插件非常简单。
bash
npm install vite-plugin-xxx --save-dev 然后在 vite.config.js 中引入并使用插件。
javascript
// vite.config.js import { defineConfig } from 'vite' import XXXPlugin from 'vite-plugin-xxx' export default defineConfig({ plugins: [XXXPlugin()] })
3.3 环境变量和模式 Vite 提供了一套基于环境变量的配置系统，可以通过 .env 文件定义环境变量，并通过 import.meta.env 在应用中访问这些变量。
env
.env
VITE_API_URL=https://api.example.com
javascript
// 在应用中访问环境变量 console.log(import.meta.env.VITE_API_URL)
Vite 还支持多种模式（development、production、test 等），可以通过命令行参数或环境变量来设置。 bash
npm run build --mode production 4. Vite 高级特性 4.1 静态资源处理 Vite 提供了强大的静态资源处理能力，可以轻松处理图片、字体、视频等资源。 javascript
// 引入图片 import imgUrl from './assets/image.png' // 在模板中使用 <img:src="imgUrl" alt="example" /> 4.2 CSS 处理 Vite 支持 CSS Modules、PostCSS、Sass/Scss 等多种 CSS 处理方式，可以灵活地处理样式。
css
/* style.css */ .title { color: blue; }
javascript
import './style.css' document.querySelector('.title').textContent = 'Hello Vite!'
4.3 代码拆分和懒加载 Vite 内置了动态导入的支持，可以方便地实现代码拆分和懒加载。 javascript
// 动态导入 import('./lib/async-component').then((module) => { console.log(module.default()) })
