Vue/Vite: @ 别名无法解析

修复 Vite 与 Vue 中 @ 别名的 “Failed to resolve import”：配置 resolve.alias 并同步 tsconfig paths。

症状

构建失败并报 Failed to resolve import "@/components/Foo.vue"。同一导入在编辑器里看起来正常，说明两个工具判断不一致。

诊断

检查 Vite 配置与 tsconfig：

// vite.config.js — check for resolve.alias
import { fileURLToPath, URL } from 'node:url';

export default defineConfig({
  resolve: {
    alias: { '@': fileURLToPath(new URL('./src', import.meta.url)) },
  },
});

若没有 alias，Vite 会把 @ 当作包作用域。

修复

配置别名，并为编辑器镜像同一映射：

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

验证

分别运行 vite dev 与 vite build；二者都能解析 @/... 导入而不报错，编辑器也不再标红，证明各工具使用的是同一映射。