Vite：下一代前端构建工具的快速上手

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文件// 动态导入polyfilloptimizeDeps: {include: ['@vue/reactivity'], // 强制包含动态导入的库},// 服务器配置server: {// 服务器端口port: 3000,// 是否开启HTTPShttps: 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, '_');}},},},},// 预处理器配置，如CSScss: {// CSS模块化modules: {generateScopedName: '[name]_[local]_[hash:base64:5]',},},// 预览环境配置preview: {port: 8080,},// 插件配置plugins: [// 可以在这里添加自定义或第三方插件],// 解析选项resolve: {extensions: ['.js', '.jsx', '.ts', '.tsx'],// 别名配置alias: {'@': '/src',},},// Esbuild配置，用于优化构建速度esbuild: {// 启用/禁用esbuild的tree shakingtreeShaking: true,jsxFactory: 'h',jsxFragment: 'Fragment',},transpileDependencies: ['my-dep'], // 指定需要转译的依赖// 额外的Rollup配置rollupOptions: {// 可以在这里添加Rollup的配置项},
});