文档阅读

Vite 是一个极速的前端构建工具，支持热模块替换（HMR）和按需编译。

1. 安装与初始化

npm create vite@latest my-app -- --template vue
cd my-app
npm install
npm run dev

2. vite.config.js 基础配置

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

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: { '@': resolve(__dirname, 'src') }
  },
  build: {
    outDir: 'dist',
    // 分包策略
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['vue']
        }
      }
    }
  }
})

3. 环境变量

在 .env 文件中定义变量，以 VITE_ 前缀开头才会暴露给客户端：

VITE_API_BASE=https://api.example.com

在代码中使用：import.meta.env.VITE_API_BASE

4. 静态资源处理

// 导入图片
import logo from './assets/logo.png'

// public 目录下的文件直接引用
// /favicon.ico → public/favicon.ico

最后更新：2026-04-18