Vite 是由 Vue.js 的作者尤雨溪开发的下一代前端构建工具，它以其快速的冷启动、按需编译和热更新能力而受到广泛关注。Vite 通过利用浏览器原生的 ES 模块导入功能，提供了几乎即时的开发环境启动速度和高度优化的开发体验。
安装 Vite
首先，确保你的系统中已安装 Node.js（推荐使用 LTS 版本）。然后，通过 npm 或 yarn 全局安装 Vite：
npm install -g create-vite
# 或者使用 yarn
yarn global add create-vite
创建新项目
使用 create-vite 命令创建一个新的 Vite 项目。这里以创建一个 Vue 项目为例：
create-vite my-vite-project --template vue
cd my-vite-project
这将初始化一个基于 Vue 3 的 Vite 项目。
开发与运行
在项目根目录下，运行以下命令启动开发服务器：
npm run dev
# 或者使用 yarn
yarn dev
Vite 会立即启动一个本地开发服务器，你可以在浏览器中访问 http://localhost:5173 查看你的应用。Vite 支持热模块替换（HMR），这意味着你在编辑代码时，浏览器页面会实时更新，无需刷新。
构建生产版本
当准备部署应用时，运行以下命令构建生产版本：
npm run build
# 或者使用 yarn
yarn build
这将生成一个优化过的、可用于生产的静态文件夹，通常位于 dist 目录下。
Vite配置
// vite.config.js
import {
defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue'; // 假设我们使用Vue
import {
resolve } from 'path';
// 环境变量
const env = process.env.NODE_ENV === 'production' ? 'prod' : 'dev';
export default defineConfig({
// 应用的基础路径
base: '/my-app/',
// 项目入口文件
root: './src',
// 输出目录
outDir: 'dist',
mode: env,
envPrefix: 'VITE_', // 所有以VITE_开头的环境变量将被注入到import.meta.env中
envFile: `.env.${
env}.local`, // 读取对应环境的.env文件
// 动态导入polyfill
optimizeDeps: {
include: ['@vue/reactivity'], // 强制包含动态导入的库
},
// 服务器配置
server: {
// 服务器端口
port: 3000,
// 是否开启HTTPS
https: false,
// 开启热模块替换
hmr: true,
// 代理配置，用于API请求转发
proxy: {
'/api': {
target: 'http://localhost:8000',
changeOrigin: true,
},
},
middlewareMode: true, // 开启中间件模式
before(app) {
app.use(async (ctx, next) => {
ctx.body = 'Hello, this is a custom middleware!';
await next();
});
},
},
// 构建配置
build: {
// 生产环境是否压缩代码
minify: true,
// 输出目录
outDir: 'dist',
// 资源文件存放目录
assetsDir: 'assets',
// chunk大小警告阈值
chunkSizeWarningLimit: 500,
rollupOptions: {
input: 'src/main.js',
output: {
manualChunks(id) {
if (id.startsWith('node_modules')) {
return id.toString().replace(/(\.[a-z]+)|[\\/]/g, '_');
}
},
},
},
},
// 预处理器配置，如CSS
css: {
// CSS模块化
modules: {
generateScopedName: '[name]_[local]_[hash:base64:5]',
},
},
// 预览环境配置
preview: {
port: 8080,
},
// 插件配置
plugins: [
// 可以在这里添加自定义或第三方插件
],
// 解析选项
resolve: {
extensions: ['.js', '.jsx', '.ts', '.tsx'],
// 别名配置
alias: {
'@': '/src',
},
},
// Esbuild配置，用于优化构建速度
esbuild: {
// 启用/禁用esbuild的tree shaking
treeShaking: true,
jsxFactory: 'h',
jsxFragment: 'Fragment',
},
transpileDependencies: ['my-dep'], // 指定需要转译的依赖
// 额外的Rollup配置
rollupOptions: {
// 可以在这里添加Rollup的配置项
},
});
Vite 的核心特性
- 快速启动：Vite 利用浏览器的原生 ES 模块支持，无需打包即可快速启动开发服务器，显著提升了启动速度。
- 按需编译：在开发模式下，Vite 只编译你正在查看的模块，大大加快了编辑-刷新的循环。
- 热模块替换（HMR）：Vite 提供了非常快速的 HMR 体验，几乎做到了无缝的实时更新。
- 配置简单：Vite 的配置文件 vite.config.js 相较于 Webpack 更为简洁，降低了入门门槛。
- 兼容性良好：Vite 支持多种框架，包括 Vue、React、Preact、Svelte 等，并且可以轻松适配自定义配置。
- 插件系统：Vite 提供了强大的插件系统，允许开发者扩展其功能，满足特定项目需求。
进阶探索
- 配置文件：虽然Vite的默认配置已经很强大，但你可以在 vite.config.js 中进行更多定制，如配置代理、别名、CSS预处理器等。
- Vue DevTools：在开发Vue应用时，确保安装并启用Vue DevTools浏览器扩展，以便更好地调试应用状态。
- TypeScript支持：如果项目中使用TypeScript，Vite已默认支持，你只需在项目中包含.ts或.tsx文件即可。
- 优化：学习如何利用Vite的内置优化选项和外部插件，进一步提升应用性能。
