Vite -岩石教程

特点

快速启动：利用原生 ESM，显著减少冷启动时间。
热模块替换 (HMR)：提供即时的更新，无需完全重新加载页面。
丰富的插件生态系统：基于 Rollup 构建，兼容多种插件。
框架无关：支持 Vue、React、Svelte、Solid 等多个前端框架。
现代浏览器支持：开发阶段支持最新的 JavaScript 和 CSS 特性。

使用场景

Vite 适用于需要快速迭代的现代 Web 开发项目，特别是那些使用 Vue、React、Svelte 或其他支持 ESM 的框架的项目。它非常适合需要高效开发和快速构建的应用程序，如单页应用 (SPA) 和渐进式 Web 应用 (PWA)。

安装方式

你可以通过以下命令安装 Vite：

# 使用 npm
npm create vite@latest

# 使用 Yarn
yarn create vite

# 使用 pnpm
pnpm create vite

使用示例

以下是一个简单的 Vite 项目的使用示例：

# 创建一个新的 Vite 项目
npm create vite@latest my-project -- --template vue

# 进入项目目录
cd my-project

# 安装依赖
npm install

# 启动开发服务器
npm run dev

常用配置参数介绍

Vite 提供了多种 API 和配置选项，包括：

Plugins：使用 vite.config.js 中的 plugins 字段配置插件。
Aliases：通过 resolve.alias 字段设置模块别名。
Build Options：使用 build 字段配置构建选项，如输出目录和最小化设置。
Server Configuration：通过 server 字段配置开发服务器选项，如端口号和代理设置。
Optimize Dependencies：使用 optimizeDeps 字段配置依赖优化选项。

示例

以下是一个简单的配置示例：

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

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': '/src'
    }
  },
  build: {
    outDir: 'dist',
    sourcemap: true
  },
  server: {
    port: 3000,
    proxy: {
      '/api': {
        target: 'http://localhost:5000',
        changeOrigin: true
      }
    }
  }
})

高级用法

使用 Rollup 插件

Vite 允许使用 Rollup 插件来扩展其功能。例如，你可以添加一个 Rollup 插件来处理自定义文件类型：

import { defineConfig } from 'vite'
import rollupPluginExample from 'rollup-plugin-example'

export default defineConfig({
  plugins: [
    rollupPluginExample({
      /* 插件配置选项 */
    })
  ]
})

Vite

特点