[!info] 关联笔记

• 所属：Vite 基础 MOC
• 相关：TS paths · 环境变量

Vite 配置与路径别名

这个概念为什么出现

@/components/Button 提升可读性，但只配 Vite 不配 TS 会出现“能跑编辑器红线”，或“类型过了构建挂”。

[!abstract] 一句话理解 Vite alias 管运行/构建解析；tsconfig paths 管类型与 IDE；两者是同一契约的两边。

最小示例

import { defineConfig } from 'vite'
import path from 'node:path'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
  server: { port: 5173 },
  build: { sourcemap: true },
})

同时配置：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": { "@/*": ["src/*"] }
  }
}

配置分段直觉

• plugins：转换能力
• resolve：解析
• server：仅 dev
• build：仅产物
• define/env：注入

本节总结

别名是跨工具合同；改一处要改一组。

自测题

1. 为什么 alias 用绝对路径更稳？

参考答案

相对路径相对配置文件位置易混；绝对路径减少歧义。