IT自学博客（1）——Vite

原创于 2025-08-21 21:00:00 发布 · 593 阅读

18 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

收录于

个人学习

Vite 是什么

Vite 是一个“现代前端构建工具”（Dev Server + 生产构建），作者是 Vue 的创建者尤雨溪。
核心理念：开发时利用浏览器原生 ESM 按需加载源码、依赖用 esbuild 预打包，构建时使用 Rollup 输出高优化产物。
不是“框架”，而是框架无关的底层工具；对 Vue、React、Svelte、Solid、Preact 等都有一流支持。

核心工作原理

开发模式（极快的启动与热更新）
- 原生 ESM：源码无需打成一个包，按需请求。
- 依赖预打包：用 esbuild 将第三方依赖预构建为 ESM，减少请求数量并提升解析速度。
- HMR（热更新）：仅替换受影响的模块，毫秒级响应。
生产构建
- 使用 Rollup 打包，具备 Tree-shaking、代码分割、动态导入等能力。
- 可通过 Rollup 插件与 Vite 插件扩展构建过程。
插件系统
- 兼容大多数 Rollup 插件，额外提供 Vite 专属的开发期钩子（中间件式开发服务器能力）。

主要特性

TypeScript/JSX/TSX 开箱即用
CSS 支持：PostCSS、CSS Modules、Sass/Less/Stylus 等
资源处理：静态资源导入、public/ 目录、图片/字体/媒体处理
环境变量：.env.[mode] 文件，使用 import.meta.env 访问（需 VITE_ 前缀）
多页应用（MPA）、库模式（Library Mode）
SSR 支持（如 SvelteKit、VitePress、Nuxt 3、Astro 等都基于 Vite）
旧浏览器兼容：@vitejs/plugin-legacy
测试：与 Vitest 深度配合

快速上手

# 创建项目
npm create vite@latest my-app
# 选择模板（Vanilla / Vue / React / Svelte / Solid 等）
cd my-app
npm install
npm run dev    # 启动开发服务器
npm run build  # 生产构建
npm run preview# 本地预览构建产物

常用配置示例

基础结构：vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue' // 或 react() from '@vitejs/plugin-react'
import path from 'node:path'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  },
  server: {
    port: 5173,
    open: true,
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true
      }
    }
  },
  build: {
    sourcemap: false,
    target: 'es2019',
    rollupOptions: {
      output: {
        // 根据依赖拆分 vendor 包，优化浏览器缓存
        manualChunks: {
          vue: ['vue'],
          vendor: ['axios', 'lodash-es']
        }
      }
    }
  }
})

React 模板仅需将插件换为：

import react from '@vitejs/plugin-react'
plugins: [react()]

环境变量
- .env.development、.env.production
- 代码中通过 import.meta.env.VITE_API_BASE 访问（必须以 VITE_ 开头）

常用目录与资源约定

src/：应用源码，直接按 ESM 引入
public/：静态原样拷贝，使用绝对路径引用（如 /logo.svg）
资源导入：支持 import img from './img.png'，打包时自动优化与指纹化

与 Webpack 的对比（简要）

开发体验：Vite 基于原生 ESM，冷启动和 HMR 明显更快；Webpack 需先整体打包再启动。
生态：Webpack 插件丰富；Vite 可用 Rollup 插件 + 自身生态，常见需求基本覆盖。
生产构建：Vite 使用 Rollup，产物优化能力强；Webpack 在复杂自定义打包管线方面仍有优势。

进阶能力

SSR/SSG：与框架（如 SvelteKit、Nuxt3、VitePress、Astro）配合实现同构与静态化。
库模式：

export default defineConfig({
  build: {
    lib: {
      entry: 'src/index.ts',
      name: 'MyLib',
      fileName: (format) => `my-lib.${format}.js`
    },
    rollupOptions: {
      external: ['vue'], // 外部化依赖
      output: {
        globals: { vue: 'Vue' }
      }
    }
  }
})

PWA：使用 vite-plugin-pwa

import { VitePWA } from 'vite-plugin-pwa'
plugins: [VitePWA({ registerType: 'autoUpdate' })]

TS 路径别名联动：结合 tsconfig.json 的 compilerOptions.paths，或使用 vite-tsconfig-paths 插件

常见问题与实用技巧

部署子路径时需要设置 base：

export default defineConfig({ base: '/subpath/' })

依赖动态 require 报错：将该包加入 optimizeDeps.include 或寻找 ESM 版本；必要时使用兼容插件。
旧浏览器兼容：引入 @vitejs/plugin-legacy
Monorepo：配合 pnpm/yarn workspaces，注意 optimizeDeps、ssr.noExternal、resolve.preserveSymlinks 等配置以适配本地包联调。
清理缓存：遇到怪异行为可删除 node_modules/.vite 后重启。
区分 process.env 与 import.meta.env：Vite 环境变量只能通过 import.meta.env 访问。