项目初始化与模板选择

项目配置与基础使用

Vite.js 是一个现代化的前端构建工具，它利用浏览器原生 ES 模块支持实现快速开发服务器启动和热更新。相比传统打包工具，Vite 在开发环境下几乎不需要等待打包过程，直接按需编译源文件，大幅提升开发体验。生产环境下则使用 Rollup 进行高效打包。

项目初始化与模板选择

使用 Vite 创建新项目非常简单，官方提供了多种方式。最常见的是通过 npm 或 yarn 初始化项目：

npm create vite@latest
# 或
yarn create vite

执行命令后，会进入交互式命令行界面，需要依次选择项目名称、框架和变体。Vite 支持多种主流前端框架：

1. Vanilla - 纯 JavaScript/TypeScript 项目
2. Vue - 支持 Vue 2 和 Vue 3
3. React - 支持 React 和 React + TypeScript
4. Preact - 轻量级 React 替代方案
5. Lit - Web Components 框架
6. Svelte - 编译型前端框架
7. Solid - 响应式 JavaScript 库

例如，要创建一个 Vue 3 + TypeScript 项目：

npm create vite@latest my-vue-app --template vue-ts

创建完成后，项目目录结构通常如下：

my-vue-app/
├── node_modules/
├── public/
├── src/
│   ├── assets/
│   ├── components/
│   ├── App.vue
│   ├── main.ts
│   ├── style.css
│   └── vite-env.d.ts
├── index.html
├── package.json
├── tsconfig.json
└── vite.config.ts

配置文件详解

Vite 的核心配置文件是 vite.config.ts（或 .js），它导出一个配置对象。基本配置示例如下：

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

export default defineConfig({
  plugins: [vue()],
  server: {
    port: 3000,
    open: true
  },
  build: {
    outDir: 'dist',
    assetsDir: 'assets'
  }
})

常用配置项包括：

• plugins: 配置使用的 Vite 插件
• server: 开发服务器选项
  • port: 指定端口号
  • open: 是否自动打开浏览器
  • proxy: 配置代理
• build: 生产构建选项
  • outDir: 输出目录
  • assetsDir: 静态资源目录
  • minify: 是否压缩代码

开发服务器与热更新

启动开发服务器非常简单：

npm run dev
# 或
yarn dev

Vite 的开发服务器具有以下特点：

1. 即时启动 - 不需要等待打包，几乎是即时的
2. 按需编译 - 只编译当前页面需要的模块
3. 热模块替换(HMR) - 保持应用状态的同时更新模块

例如，修改一个 Vue 组件时，只有该组件会被重新加载，而不会刷新整个页面。

环境变量与模式

Vite 使用 dotenv 从 .env 文件加载环境变量。项目根目录可以创建以下文件：

• .env: 所有情况下都会加载
• .env.local: 本地覆盖，会被 git 忽略
• .env.[mode]: 特定模式下的环境变量
• .env.[mode].local: 特定模式的本地覆盖

变量命名需要以 VITE_ 开头才能在客户端访问：

VITE_API_URL=https://api.example.com
VITE_DEBUG=true

在代码中可以通过 import.meta.env 访问：

console.log(import.meta.env.VITE_API_URL)

静态资源处理

Vite 提供了多种静态资源处理方式：

1. 直接引入 - 返回解析后的 URL

import imgUrl from './img.png'
document.getElementById('hero-img').src = imgUrl

2. 公共目录 - public 下的文件会被直接复制到根目录

3. JSON 导入 - 可以直接导入 JSON 文件

import pkg from './package.json'

4. Glob 导入 - 批量导入模块

const modules = import.meta.glob('./dir/*.js')

CSS 与预处理器支持

Vite 内置支持 CSS 和各种 CSS 预处理器，无需额外配置：

// 直接导入 CSS
import './style.css'

// 导入 Sass
import './style.scss'

// 导入 Less
import './style.less'

支持 CSS Modules，只需在文件名中添加 .module：

import styles from './module.module.css'

function Component() {
  return <div className={styles.error}>Error Message</div>
}

构建优化

Vite 在生产构建时自动进行多项优化：

1. 代码分割 - 自动拆分代码块
2. 异步加载 - 动态导入的模块会被拆分为单独 chunk
3. 资源内联 - 小文件自动转为 base64
4. 预加载指令 - 自动生成 <link rel="modulepreload">

可以通过配置进一步优化：

build: {
  rollupOptions: {
    output: {
      manualChunks: {
        'vendor': ['vue', 'vue-router', 'pinia']
      }
    }
  }
}

插件系统

Vite 的插件系统兼容 Rollup 插件，同时有自己特有的钩子。常用官方插件包括：

• @vitejs/plugin-vue: Vue 支持
• @vitejs/plugin-react: React 支持
• @vitejs/plugin-legacy: 传统浏览器支持

安装和使用插件示例：

npm install @vitejs/plugin-vue @vitejs/plugin-legacy -D

import vue from '@vitejs/plugin-vue'
import legacy from '@vitejs/plugin-legacy'

export default defineConfig({
  plugins: [
    vue(),
    legacy({
      targets: ['defaults', 'not IE 11']
    })
  ]
})

TypeScript 集成

Vite 天然支持 TypeScript，不需要额外配置。但为了更好的开发体验，可以：

1. 在 tsconfig.json 中配置路径别名：

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

2. 在 vite.config.ts 中同步配置：

import { resolve } from 'path'

export default defineConfig({
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src')
    }
  }
})

3. 创建 vite-env.d.ts 增强类型提示：

/// <reference types="vite/client" />

interface ImportMetaEnv {
  readonly VITE_API_URL: string
}

interface ImportMeta {
  readonly env: ImportMetaEnv
}

多页面应用配置

Vite 支持多页面应用，只需在 vite.config.ts 中配置多个入口：

import { resolve } from 'path'

export default defineConfig({
  build: {
    rollupOptions: {
      input: {
        main: resolve(__dirname, 'index.html'),
        about: resolve(__dirname, 'about.html'),
        contact: resolve(__dirname, 'contact.html')
      }
    }
  }
})

对应的项目结构：

project/
├── about.html
├── contact.html
├── index.html
└── src/
    ├── about/
    ├── contact/
    └── main/

自定义中间件

可以通过配置 server.middlewareMode 和 server.proxy 实现自定义中间件：

export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, '')
      }
    }
  }
})

或者直接添加自定义中间件：

export default defineConfig({
  server: {
    middlewareMode: true,
    configureServer(server) {
      server.middlewares.use((req, res, next) => {
        if (req.url === '/custom') {
          res.end('Hello from custom middleware')
        } else {
          next()
        }
      })
    }
  }
})

性能优化实践

1. 依赖预构建 - Vite 会自动预构建依赖，也可以手动配置：

optimizeDeps: {
  include: ['vue', 'vue-router', 'lodash-es'],
  exclude: ['some-pkg']
}

2. 使用现代浏览器特性 - 配置构建目标：

build: {
  target: 'esnext'
}

3. 启用 gzip/brotli 压缩 - 使用插件：

npm install vite-plugin-compression -D

import viteCompression from 'vite-plugin-compression'

export default defineConfig({
  plugins: [
    viteCompression()
  ]
})

测试集成

Vite 可以轻松集成各种测试框架。以 Vitest 为例：

1. 安装依赖：

npm install vitest happy-dom @testing-library/vue -D

2. 配置 vite.config.ts：

/// <reference types="vitest" />

export default defineConfig({
  test: {
    globals: true,
    environment: 'happy-dom'
  }
})

3. 添加测试脚本到 package.json：

{
  "scripts": {
    "test": "vitest"
  }
}

4. 编写测试文件：

import { render } from '@testing-library/vue'
import MyComponent from './MyComponent.vue'

test('renders correctly', () => {
  const { getByText } = render(MyComponent, {
    props: { msg: 'Hello' }
  })
  getByText('Hello')
})

部署策略

Vite 应用的部署非常简单，主要考虑以下几点：

1. 静态文件部署 - 构建后直接部署 dist 目录
2. SPA 部署 - 配置服务器重定向到 index.html
3. SSR 部署 - 需要 Node.js 服务器环境

对于静态部署，构建命令为：

npm run build

生成的 dist 目录结构：

dist/
├── assets/
│   ├── index.[hash].js
│   └── style.[hash].css
└── index.html

对于 Nginx 配置示例：

server {
  listen 80;
  server_name example.com;
  root /path/to/dist;
  index index.html;

  location / {
    try_files $uri $uri/ /index.html;
  }
}