Vite构建工具

Vite 是一个面向现代浏览器的极速构建工具，由 Vue.js 作者尤雨溪开发。它利用浏览器原生 ES 模块支持和 esbuild 的超快编译能力，在开发环境下实现近乎瞬时的热更新，生产环境则通过 Rollup 打包。与传统构建工具相比，Vite 在开发体验和构建速度上有显著提升。

Vite 的核心优势

Vite 的核心优势在于其创新的开发服务器设计。传统构建工具如 webpack 需要在启动时打包整个应用，而 Vite 直接利用浏览器对 ES Modules 的原生支持：

// 传统方式 - 需要打包才能运行
import { createApp } from 'vue'
import App from './App.vue'

// Vite 方式 - 浏览器直接加载 ESM
import { createApp } from '/node_modules/.vite/vue.js'
import App from '/src/App.vue?t=1629780000000'

这种设计带来三个显著优势：

1. 冷启动时间与项目规模无关
2. 按需编译，只编译当前屏幕使用的文件
3. 原生 ESM 热更新(HMR)速度极快

项目初始化与配置

创建 Vite 项目非常简单：

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

项目结构遵循约定优于配置原则：

my-vue-app/
├── node_modules/
├── public/
├── src/
│   ├── assets/
│   ├── components/
│   ├── App.vue
│   └── main.js
├── vite.config.js
└── package.json

基础配置文件示例：

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

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

开发服务器特性

Vite 开发服务器提供多项增强功能：

快速热模块替换

修改 Vue 单文件组件时，Vite 能够精确更新变化的模块而不刷新页面：

<!-- src/components/HelloWorld.vue -->
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

<template>
  <button @click="count++">Count is: {{ count }}</button>
</template>

修改 count 的初始值或模板内容时，组件状态会被保留。

依赖预构建

首次启动时，Vite 会使用 esbuild 对依赖进行预构建：

[vite] Optimizable dependencies detected:
vue, vue-router, pinia...
[vite] Pre-bundling them to speed up dev server page load...

这带来两个好处：

1. CommonJS/UMD 依赖转为 ESM
2. 合并多个文件请求（如 lodash 的子模块）

生产环境构建

生产构建使用 Rollup 并自动启用多项优化：

// 构建命令
vite build

// 高级配置示例
build: {
  rollupOptions: {
    output: {
      manualChunks(id) {
        if (id.includes('node_modules')) {
          return 'vendor'
        }
      }
    }
  }
}

典型优化包括：

• 代码分割
• 资源压缩
• CSS 提取
• 异步 chunk 加载

插件系统

Vite 插件扩展 Rollup 插件接口并添加 Vite 特定钩子。常用插件示例：

// 自定义插件示例
export default function myPlugin() {
  return {
    name: 'transform-file',
    transform(code, id) {
      if (id.endsWith('.custom')) {
        return { code: code.replace(/foo/g, 'bar') }
      }
    }
  }
}

官方维护的核心插件：

• @vitejs/plugin-vue：Vue 单文件组件支持
• @vitejs/plugin-vue-jsx：Vue JSX 支持
• @vitejs/plugin-legacy：传统浏览器支持

与 Vue 的深度集成

Vite 为 Vue 提供开箱即用的支持：

单文件组件增强

支持所有 Vue SFC 特性：

<script setup>
// 组合式 API 语法糖
import { useCounter } from './counter.js'
const { count, increment } = useCounter()
</script>

<template>
  <button @click="increment">{{ count }}</button>
</template>

<style scoped>
button {
  color: var(--primary);
}
</style>

自定义块处理

支持自定义 SFC 块并通过插件处理：

<docs>
## 组件文档
这是一个计数器组件
</docs>

对应插件配置：

plugins: [
  vue({
    customBlocks: ['docs']
  })
]

高级功能

环境变量处理

Vite 使用 dotenv 加载 .env 文件：

.env
VITE_API_URL=https://api.example.com

客户端使用：

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

CSS 处理

支持 CSS Modules、预处理器和 PostCSS：

<style module>
.red { color: red }
</style>

<style lang="scss">
$primary: #1890ff;
.button {
  background: $primary;
}
</style>

静态资源处理

特殊导入语法处理各类资源：

import imgUrl from './image.png?url'       // 解析为 URL
import imgRaw from './image.png?raw'      // 作为字符串导入
import worker from './worker.js?worker'  // 作为 Web Worker

性能优化实践

依赖优化

手动指定需要预构建的依赖：

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

分包策略

通过 rollupOptions 配置代码分割：

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

异步加载

利用动态导入实现路由级代码分割：

const UserDetails = () => import('./views/UserDetails.vue')

与其他工具集成

与 Vue Router 配合

典型的路由配置示例：

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue')
  }
]

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes
})

状态管理 (Pinia)

创建和使用 store：

// stores/counter.js
import { defineStore } from 'pinia'

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

组件中使用：

<script setup>
import { useCounterStore } from '@/stores/counter'
const counter = useCounterStore()
</script>

<template>
  <button @click="counter.increment">
    {{ counter.count }}
  </button>
</template>

调试与问题排查

Vite 提供详细的调试信息：

# 启用调试日志
DEBUG=vite:* vite

常见问题处理：

1. 依赖解析问题：

resolve: {
  alias: {
    '@': path.resolve(__dirname, './src')
  }
}

2. 浏览器兼容性问题：

import legacy from '@vitejs/plugin-legacy'

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

自定义开发服务器

扩展 Vite 开发服务器功能：

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

创建自定义中间件：

import { createServer } from 'vite'

const server = await createServer({
  server: {
    middlewareMode: true,
    configureServer: (server) => {
      server.middlewares.use((req, res, next) => {
        console.log('Request:', req.url)
        next()
      })
    }
  }
})

多页面应用支持

配置多入口点：

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

目录结构：

src/
├── pages/
│   ├── about/
│   │   ├── index.html
│   │   └── main.js
│   └── contact/
│       ├── index.html
│       └── main.js
└── index.html

测试集成

与 Vitest 测试框架的无缝集成：

// vite.config.js
/// <reference types="vitest" />
import { defineConfig } from 'vite'

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

测试组件示例：

import { mount } from '@vue/test-utils'
import Counter from './Counter.vue'

test('increments counter', async () => {
  const wrapper = mount(Counter)
  await wrapper.find('button').trigger('click')
  expect(wrapper.text()).toContain('1')
})

部署策略

不同环境的部署配置：

静态文件部署

vite build --base=/my-public-path/

SSR 部署

// vite.config.js
export default defineConfig({
  ssr: {
    format: 'cjs',
    target: 'node'
  }
})

云平台部署

示例 Dockerfile：

FROM node:16-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
EXPOSE 3000
CMD ["npm", "run", "preview"]