需同时配置 vite 与 typescript：在 vite.config.ts 中通过 resolve.alias 将 @ 映射为 src 绝对路径，使用 fileurltopath + url 确保兼容性与类型支持。
要让 @ 在 Vue 3 + Vite 项目中稳定指向 src 目录，必须同时配置 Vite 和 TypeScript 两套系统。只配一半，要么运行时报错，要么编辑器里一直飘红。
改 vite.config.ts：让 Vite 能解析 @
Vite 在启动开发服务器或构建时，靠 resolve.alias 把 @/xxx 替换成真实路径。没这步，import 就会直接报 Failed to resolve import。
- 确保已导入
path（Node.js 内置模块）或使用fileURLToPath + URL方式获取绝对路径 - 推荐写法（兼容性好，TypeScript 友好）：
import { defineConfig } from 'vite'<br>import { fileURLToPath, URL } from 'node:url'<br>import vue from '@vitejs/plugin-vue'<br><br>const __dirname = fileURLToPath(new URL('.', import.meta.url))<br><br>export default defineConfig({<br> plugins: [vue()],<br> resolve: {<br> alias: {<br> '@': `${__dirname}/src`<br> }<br> }<br> - 如果用
path.resolve，注意__dirname是 vite.config.ts 所在目录（即项目根目录），所以path.resolve(__dirname, 'src')是安全的
改 tsconfig.json：让 TS 类型检查认得 @
TypeScript 不读 vite.config.ts，它只看自己的 compilerOptions。不配这里，VS Code 或 WebStorm 就会提示 Cannot find module '@/xxx'，即使项目能跑起来。
- 打开
tsconfig.json（或tsconfig.app.json，取决于项目结构） - 在
compilerOptions中添加："baseUrl": ".",<br>"paths": {<br> "@/*": ["src/*"]<br>} -
baseUrl: "."表示所有路径别名都相对于项目根目录解析；"@/*": ["src/*"]告诉 TS，任何以@/开头的导入，都去src/下找对应文件 - 改完后重启 TS 服务（VS Code 中可按
Ctrl+Shift+P→ “Restart TS server”）
验证和常见补救
配置完别急着写代码，先做三件事确认是否真正生效：
- 重启 Vite 开发服务器（
npm run dev或pnpm dev），看是否还能正常启动 - 在任意
.vue或.ts文件中输入import xxx from '@/components/xxx.vue'，观察：- VS Code 是否有自动路径提示？悬停是否显示正确路径？
- 有没有红色波浪线？没有就说明 TS 已识别
- 检查控制台和终端，确保没有
Module not found类报错 - 如果仍报错，重点检查：
- 是否误改了
tsconfig.node.json（这是给 Node 环境脚本用的，不是给源码用的） -
vite.config.ts是否导出了默认配置对象（不是命名导出） - 项目里是否装了
@types/node（某些路径解析逻辑依赖它，尤其在path或fs相关操作中）
- 是否误改了
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
