Vite

Vite（法语意为"快速的"）是一种现代前端构建工具，它提供了更快的开发服务器启动速度和热更新能力，同时也能够为生产环境生成优化的构建产物。

核心特性

快速的开发服务器

Vite 使用原生 ESM 提供更快的开发服务器启动速度，无需打包整个应用。

热模块替换（HMR）

Vite 提供了快速的热模块替换能力，修改代码后能够立即看到变化，无需刷新整个页面。

优化的构建

Vite 使用 Rollup 进行生产构建，生成高度优化的静态资源。

开箱即用的 TypeScript 支持

Vite 内置了对 TypeScript 的支持，无需额外配置。

丰富的插件系统

Vite 提供了丰富的插件系统，能够扩展其功能。

基本使用

初始化项目

# 使用 npm
npm create vite@latest

# 使用 yarn
yarn create vite

# 使用 pnpm
pnpm create vite

项目结构

├── index.html
├── package.json
├── src/
│   ├── main.js
│   ├── App.vue
│   └── components/
└── vite.config.js

配置文件

// vite.config.js
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',
    assetsDir: 'assets'
  }
})

加载中...