基础配置：vite.config、入口、别名、静态资源

本节目标

• 写第一份 vite.config.js
• 配置 resolve.alias 路径别名
• 理解 public 目录与「import 资源」两种静态资源管理方式

Vite 大多「零配置」就能跑，但真实项目一定需要一份 vite.config.js。它用 defineConfig 包裹以获得类型提示：

// vite.config.js
import { defineConfig } from 'vite'
import { fileURLToPath, URL } from 'node:url'

export default defineConfig({
  // 项目根目录（默认当前目录）
  root: '.',
  // 部署时的基础路径：部署到子目录 /my-app/ 时设 '/my-app/'
  base: '/',
  resolve: {
    // 路径别名：之后可 import '@/utils' 而非 '../../utils'
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
  // 不需要构建、直接原样拷贝到 dist 根的文件（如 favicon、robots.txt）
  publicDir: 'public',
})

静态资源有两条路：

// 方式一：import 资源（会被 Vite 处理、加 hash、返回最终 URL）
import logoUrl from './logo.png'
document.querySelector('#app').innerHTML = `<img src="${logoUrl}">`

// 方式二：放 public/ 目录，用绝对路径引用，构建时原样拷贝
// public/logo.png → 构建后位于 dist/logo.png，引用写 '/logo.png'

# 开发：npm run dev（vite）
# 生产构建：把产物输出到 dist/
# npm run build     # 等价于 npx vite build
# npm run preview   # 本地预览构建产物

import 方式适合「会被打包优化」的资源（图片、字体），public 适合「必须保持原文件名/路径」的文件（robots.txt、根 favicon）。

名词解释

defineConfig：Vite 提供的配置包裹函数，仅用于「获得 TS 类型提示」，运行时不改变行为，是写配置的标准入口。

resolve.alias：路径别名，把 @ 映射到 src 等目录，避免深层 ../../ 相对路径，重构时尤其省心。

base：部署基础路径。若站点挂在 https://x.com/my-app/，base 必须设 /my-app/，否则资源路径会 404。

publicDir：存放「无需处理、原样拷贝」的静态文件目录，默认 public。

课后练习

练习 1：import logo from './logo.png' 得到的 logo 是什么类型的值？

答案：是一个字符串 URL（开发时是 /src/logo.png 之类的路径，构建后变成带 hash 的 /assets/logo-xxxx.png）。你可以直接把它当 src 用。

练习 2：什么时候该用 public/ 而不是 import？

答案：当文件「必须保持原文件名和路径、不能被加 hash 或处理」时，比如 robots.txt、manifest.json、根目录 favicon.ico、需要按固定 URL 访问的资源。其余图片/字体优先用 import。

总结

vite.config.js 的核心配置就三样：resolve.alias 解决路径、静态资源「import vs public」二选一、base 决定部署位置。它比 Webpack 配置轻得多——这正是 Vite「约定优于配置」的体现。下一节我们处理「CSS / 图片 / TypeScript / JSX」，看 Vite 开箱即用的能力到底多强。