Vite 教程

1. 项目概述

Vite（发音为 "veet"）是一种现代化的前端构建工具，它通过利用浏览器的原生 ES 模块支持和快速的开发服务器，提供了极速的开发体验。Vite 由 Vue.js 的创建者尤雨溪开发，旨在解决传统构建工具在开发过程中的性能瓶颈。

1.1 主要特性

  • 极速开发服务器：使用原生 ES 模块，无需打包，启动速度极快
  • **热模块替换 (HMR)**：实时更新，无需刷新页面
  • 按需编译：只编译当前需要的代码
  • 优化的构建输出：使用 Rollup 进行生产构建，生成优化的静态资源
  • 多框架支持：支持 Vue、React、Svelte、Preact 等多种前端框架
  • 内置 TypeScript 支持：无需额外配置
  • CSS 预处理器支持：内置对 SCSS、Less、Stylus 的支持
  • 插件系统：可扩展的插件机制
  • 环境变量管理：内置 .env 文件支持

1.2 适用场景

  • 现代前端项目开发
  • 单页应用 (SPA) 构建
  • 静态网站生成
  • 库和组件开发
  • 原型快速开发
  • 需要快速开发反馈的项目

2. 安装与设置

2.1 环境要求

  • Node.js 16.0 或更高版本
  • npm 7.0 或更高版本，或 yarn/pnpm

2.2 安装步骤

方法一：使用 npm create vite

# 创建项目
npm create vite@latest my-vite-app

# 选择框架和变体
# 例如：Vue + JavaScript

# 进入项目目录
cd my-vite-app

# 安装依赖
npm install

# 启动开发服务器
npm run dev

方法二：使用特定模板

# Vue + TypeScript
npm create vite@latest my-vite-app -- --template vue-ts

# React + JavaScript
npm create vite@latest my-vite-app -- --template react

# React + TypeScript
npm create vite@latest my-vite-app -- --template react-ts

# Svelte + JavaScript
npm create vite@latest my-vite-app -- --template svelte

# Svelte + TypeScript
npm create vite@latest my-vite-app -- --template svelte-ts

# Preact + JavaScript
npm create vite@latest my-vite-app -- --template preact

# Preact + TypeScript
npm create vite@latest my-vite-app -- --template preact-ts

# Vanilla + JavaScript
npm create vite@latest my-vite-app -- --template vanilla

# Vanilla + TypeScript
npm create vite@latest my-vite-app -- --template vanilla-ts

2.3 基本项目结构

以 Vue + TypeScript 模板为例：

my-vite-app/
├── public/            # 静态资源
├── src/
│   ├── assets/        # 项目资源文件
│   ├── components/    # 组件
│   ├── App.vue        # 根组件
│   ├── main.ts        # 入口文件
│   └── vite-env.d.ts  # Vite 类型声明
├── index.html         # HTML 入口
├── tsconfig.json      # TypeScript 配置
├── tsconfig.node.json #  Node.js 环境的 TypeScript 配置
├── vite.config.ts     # Vite 配置
├── package.json       # 项目配置
└── package-lock.json  # 依赖锁定

3. 核心概念

3.1 开发服务器

Vite 的开发服务器利用浏览器的原生 ES 模块支持，直接提供源代码，无需打包。当浏览器请求一个模块时，Vite 会在服务器端实时编译该模块，并将编译后的结果返回给浏览器。

3.2 热模块替换 (HMR)

Vite 提供了快速的热模块替换功能，当你修改代码时，它会只更新变化的部分，而不是整个页面。这大大提高了开发效率，特别是在大型应用中。

3.3 生产构建

对于生产环境，Vite 使用 Rollup 进行构建，生成优化的静态资源。Rollup 会进行代码分割、tree-shaking、压缩等优化，确保生产环境的代码体积最小、加载速度最快。

3.4 插件系统

Vite 拥有一个灵活的插件系统，允许你扩展其功能。插件可以修改 Vite 的默认行为，添加新的功能，或与其他工具集成。

3.5 环境变量

Vite 内置了对 .env 文件的支持，允许你在不同环境中使用不同的配置。

4. 基本使用

4.1 启动开发服务器

npm run dev

开发服务器启动后，你可以在浏览器中访问 http://localhost:5173 查看应用。

4.2 构建生产版本

npm run build

构建完成后，生产文件会生成在 dist 目录中。

4.3 预览生产构建

npm run preview

这会启动一个本地服务器，预览生产构建的结果。

4.4 配置 Vite

Vite 的配置文件是 vite.config.ts（或 vite.config.js），位于项目根目录。

基本配置示例

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
    port: 3000,
    open: true
  },
  build: {
    outDir: 'dist',
    sourcemap: true
  }
})

5. 高级功能

5.1 路径别名

在 vite.config.ts 中配置路径别名，简化导入路径：

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src')
    }
  }
})

在 TypeScript 中配置

在 tsconfig.json 中添加相应的配置：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

使用路径别名

// 之前
import Component from './components/Component.vue'

// 之后
import Component from '@/components/Component.vue'

5.2 环境变量

创建 .env 文件

在项目根目录创建以下文件：

  • .env：所有环境通用
  • .env.development：开发环境专用
  • .env.production：生产环境专用
  • .env.local：本地覆盖，不会被 Git 跟踪

环境变量示例

# .env
VITE_APP_TITLE=My App
VITE_API_BASE_URL=/api

在代码中使用环境变量

// src/main.ts
console.log(import.meta.env.VITE_APP_TITLE) // My App
console.log(import.meta.env.VITE_API_BASE_URL) // /api
console.log(import.meta.env.MODE) // development 或 production
console.log(import.meta.env.PROD) // 是否为生产环境
console.log(import.meta.env.DEV) // 是否为开发环境

5.3 自定义插件

创建简单插件

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [
    vue(),
    {
      name: 'my-plugin',
      configureServer(server) {
        server.middlewares.use('/custom', (req, res) => {
          res.end('Hello from custom plugin!')
        })
      }
    }
  ]
})

使用社区插件

# 安装插件
npm install vite-plugin-pwa
// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { VitePWA } from 'vite-plugin-pwa'

export default defineConfig({
  plugins: [
    vue(),
    VitePWA({
      registerType: 'autoUpdate',
      includeAssets: ['favicon.ico', 'apple-touch-icon.png', 'masked-icon.svg'],
      manifest: {
        name: 'My App',
        short_name: 'App',
description: 'My awesome app',
        theme_color: '#ffffff',
        icons: [
          {
            src: 'pwa-192x192.png',
            sizes: '192x192',
            type: 'image/png'
          },
          {
            src: 'pwa-512x512.png',
            sizes: '512x512',
            type: 'image/png'
          }
        ]
      }
    })
  ]
})

5.4 构建优化

代码分割

Vite 会自动进行代码分割，将第三方库和应用代码分开打包：

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['vue', 'vue-router'],
          ui: ['ant-design-vue']
        }
      }
    }
  }
})

CSS 分离

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  build: {
    cssCodeSplit: true
  }
})

压缩选项

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  build: {
    minify: 'terser',
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true
      }
    }
  }
})

5.5 多页面应用

配置多页面

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

export default defineConfig({
  plugins: [vue()],
  build: {
    rollupOptions: {
      input: {
        main: resolve(__dirname, 'index.html'),
        admin: resolve(__dirname, 'admin.html')
      }
    }
  }
})

创建多个 HTML 入口

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" type="image/svg+xml" href="/vite.svg">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Main App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>
<!-- admin.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" type="image/svg+xml" href="/vite.svg">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Admin Panel</title>
  </head>
  <body>
    <div id="admin"></div>
    <script type="module" src="/src/admin.ts"></script>
  </body>
</html>

6. 实用案例

6.1 Vue 3 项目

创建项目

npm create vite@latest vue3-app -- --template vue-ts
cd vue3-app
npm install

添加路由和状态管理

npm install vue-router@4 pinia

配置路由

// src/router/index.ts
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('../views/AboutView.vue')
    }
  ]
})

export default router

配置 Pinia 状态管理

// src/stores/counter.ts
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0
  }),
  getters: {
    doubleCount: (state) => state.count * 2
  },
  actions: {
    increment() {
      this.count++
    }
  }
})

更新主入口文件

// src/main.ts
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'

createApp(App)
  .use(createPinia())
  .use(router)
  .mount('#app')

6.2 React 项目

创建项目

npm create vite@latest react-app -- --template react-ts
cd react-app
npm install

添加路由和状态管理

npm install react-router-dom @reduxjs/toolkit react-redux

配置路由

// src/App.tsx
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom'
import Home from './pages/Home'
import About from './pages/About'

function App() {
  return (
    <Router>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  )
}

export default App

配置 Redux

// src/app/store.ts
import { configureStore } from '@reduxjs/toolkit'
import counterReducer from '../features/counter/counterSlice'

export const store = configureStore({
  reducer: {
    counter: counterReducer
  }
})

export type RootState = ReturnType<typeof store.getState>
export type AppDispatch = typeof store.dispatch
// src/features/counter/counterSlice.ts
import { createSlice } from '@reduxjs/toolkit'

interface CounterState {
  value: number
}

const initialState: CounterState = {
  value: 0
}

export const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment: (state) => {
      state.value += 1
    },
    decrement: (state) => {
      state.value -= 1
    }
  }
})

export const { increment, decrement } = counterSlice.actions
export default counterSlice.reducer

更新主入口文件

// src/index.tsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import { Provider } from 'react-redux'
import { store } from './app/store'
import App from './App'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
)

6.3 库开发

创建库项目

npm create vite@latest my-library -- --template vanilla-ts
cd my-library
npm install

修改配置

// vite.config.ts
import { defineConfig } from 'vite'
import { resolve } from 'path'

export default defineConfig({
  build: {
    lib: {
      entry: resolve(__dirname, 'src/main.ts'),
      name: 'MyLibrary',
      fileName: (format) => `my-library.${format}.js`
    },
    rollupOptions: {
      external: [],
      output: {
        globals: {}
      }
    }
  }
})

编写库代码

// src/main.ts
export function add(a: number, b: number): number {
  return a + b
}

export function subtract(a: number, b: number): number {
  return a - b
}

export default {
  add,
  subtract
}

构建库

npm run build

7. 性能优化

7.1 开发环境优化

  • 使用 pnpm：更快的包安装和更少的磁盘空间占用
  • 启用持久化缓存：在 vite.config.ts 中配置 cacheDir
  • 配置浏览器缓存：在开发服务器中设置合理的缓存策略
  • 使用快速的文件系统：考虑使用 SSD 和合适的文件系统

7.2 生产环境优化

  • 启用代码分割：将代码拆分为多个 chunks
  • 使用 Tree Shaking：移除未使用的代码
  • 压缩静态资源：启用 gzip 或 brotli 压缩
  • 优化 CSS：提取和压缩 CSS
  • 使用 CDN：将静态资源部署到 CDN
  • 预加载关键资源：使用 &lt;link rel=&quot;preload&quot;&gt;
  • 懒加载非关键资源：使用动态导入

7.3 配置示例

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

export default defineConfig({
  plugins: [vue()],
  cacheDir: './node_modules/.vite',
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src')
    }
  },
  build: {
    target: 'es2015',
    minify: 'terser',
    cssCodeSplit: true,
    sourcemap: false,
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['vue', 'vue-router', 'pinia'],
          ui: ['ant-design-vue']
        }
      }
    }
  },
  server: {
    port: 3000,
    open: true,
    fs: {
      strict: false
    }
  }
})

8. 最佳实践

8.1 项目结构

  • 合理组织文件：按功能或模块组织代码
  • 使用路径别名：简化导入路径
  • 分离配置文件：将配置与代码分离
  • 使用 TypeScript：提供类型安全

8.2 开发流程

  • 使用 Git 分支：遵循 Git 工作流
  • 编写单元测试：确保代码质量
  • 使用 ESLint 和 Prettier：保持代码风格一致
  • 自动化构建和部署：使用 CI/CD 流程

8.3 性能监控

  • 使用 Lighthouse：评估网站性能
  • 监控核心 Web 指标：FCP、LCP、FID、CLS 等
  • 使用 Source Map Explorer：分析打包大小
  • 定期进行性能测试：确保性能稳定

8.4 安全性

  • 使用 HTTPS：保护数据传输
  • 设置适当的 CSP：防止 XSS 攻击
  • 验证用户输入：防止注入攻击
  • 使用安全的依赖：定期更新依赖

9. 常见问题与解决方案

9.1 开发服务器启动缓慢

问题：开发服务器启动时间过长

解决方案：

  • 检查项目大小和依赖数量
  • 确保使用了最新版本的 Vite
  • 配置合理的 cacheDir
  • 检查是否有大量的文件需要处理

9.2 热更新不生效

问题：修改代码后热更新没有生效

解决方案：

  • 检查文件是否在 Vite 的处理范围内
  • 确保没有语法错误导致编译失败
  • 检查浏览器控制台是否有错误
  • 尝试重启开发服务器

9.3 构建失败

问题：生产构建失败

解决方案：

  • 检查 TypeScript 类型错误
  • 检查是否有未解析的导入
  • 检查依赖是否正确安装
  • 查看详细的错误信息并针对性解决

9.4 打包体积过大

问题：生产构建的文件体积过大

解决方案：

  • 启用代码分割
  • 检查是否有未使用的依赖
  • 优化图片和其他静态资源
  • 使用 Tree Shaking 移除未使用的代码

9.5 浏览器兼容性问题

问题：在某些浏览器中应用无法正常运行

解决方案：

  • 在 vite.config.ts 中设置适当的 target
  • 考虑使用 polyfill
  • 测试主流浏览器的兼容性
  • 使用 Babel 进行额外的转换

10. 参考资源

10.1 官方文档

10.2 学习资源

10.3 插件与工具

10.4 相关工具

  • Rollup - Vite 使用的打包工具
  • ESBuild - Vite 使用的快速编译器
  • pnpm - 快速的包管理器
  • ESLint - 代码质量工具
  • Prettier - 代码格式化工具

11. 总结

Vite 是一个现代化的前端构建工具，它通过利用浏览器的原生 ES 模块支持和快速的开发服务器，为前端开发带来了革命性的体验。通过本教程，你应该已经掌握了 Vite 的基本使用方法和高级功能，包括：

  • 项目创建和配置
  • 开发服务器和热更新
  • 生产构建和优化
  • 环境变量管理
  • 插件系统
  • 多框架支持
  • 性能优化
  • 最佳实践

Vite 的设计理念是 "快速的开发体验"，它通过减少不必要的编译和打包步骤，显著提高了开发效率。同时，它在生产环境中使用 Rollup 进行构建，确保了输出的代码质量和性能。

Vite 适合从简单的个人项目到复杂的企业级应用的各种场景。它的插件系统和生态系统不断发展，为开发者提供了越来越多的工具和解决方案。

随着前端技术的不断发展，Vite 已经成为现代前端开发的首选构建工具之一。它不仅提高了开发效率，也促进了前端工程化的发展。希望本教程对你的学习和开发有所帮助！

« 上一篇 NestJS 教程 - 基于 TypeScript 的 Node.js 框架 下一篇 » Webpack 教程 - 现代 JavaScript 应用的静态模块打包器
↑