Vite 速查

Vite 是前端构建工具，核心理念是「原生 ESM 开发服务器 + Rollup 生产构建」。

创建项目

# 官方模板脚手架
npm create vite@latest my-app -- --template vue

# 常用模板：vanilla / vue / react / preact / lit / svelte

常用命令

命令	作用
npm run dev	启动开发服务器（默认 5173 端口）
npm run build	生产构建，输出到 dist/
npm run preview	本地预览构建产物

配置要点（vite.config.js）

import { defineConfig } from 'vite'

export default defineConfig({
  base: '/',            // 部署到子路径时改为对应前缀
  server: {
    port: 5173,
    host: '127.0.0.1'
  },
  build: {
    outDir: 'dist'
  }
})

常见坑

• 端口被占用：vite --port 5174 换端口；
• 刷新 404（部署到静态托管）：SPA 需要托管平台配置回退到 index.html；
• import 路径：静态资源建议放 public/，用根路径引用。