在 Vite 项目中配置路径别名需同步设置 vite.config.ts 的 resolve.alias 和 tsconfig.json 的 compilerOptions.paths，确保构建、类型检查与 IDE 跳转均生效，例如 @ 指向 src，且 paths 中需用 "@/*" 形式匹配子路径。
在 Vite 项目中配置路径别名（alias），能有效避免冗长相对路径（如 ../../../utils/request），提升代码可读性和维护性。关键在于同时配置 Vite 的构建解析别名和 TypeScript（如使用）的类型提示支持，否则编辑器可能报错或跳转失效。
1. 配置 Vite 的 resolve.alias
在 vite.config.ts（或 vite.config.js）中，通过 resolve.alias 设置运行时与构建时识别的路径映射：
- 使用
path.resolve()确保路径绝对化，避免跨平台问题 - 推荐按目录结构定义常用别名，例如
@指向src，@/assets指向src/assets
示例（vite.config.ts）：
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': path.resolve(__dirname, 'src'),
'@components': path.resolve(__dirname, 'src/components'),
'@utils': path.resolve(__dirname, 'src/utils'),
'@assets': path.resolve(__dirname, 'src/assets')
}
}
});
2. 配置 TypeScript 的 paths（确保类型检查和 IDE 跳转）
仅配 Vite 别名，TS 编译器和 VS Code 默认不识别，需同步更新 tsconfig.json 的 compilerOptions.paths：
-
baseUrl必须设为"."（项目根目录），否则paths不生效 -
paths的键名需与 Vite 中的 alias 键一致，值为相对于baseUrl的数组（支持多匹配）
示例（tsconfig.json）：
java-api-doc-generator
下载
分析 Java Spring Boot 后端 Controller 代码，自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["src/*"],
"@components/*": ["src/components/*"],
"@utils/*": ["src/utils/*"],
"@assets/*": ["src/assets/*"]
}
}
}
3. 使用别名导入（无需额外插件）
配置完成后，所有 import 语句可直接使用别名，Vite 构建、HMR 和 TS 类型检查均正常工作：
import Button from '@/components/Button.vue';import { request } from '@utils/request';import logo from '@assets/logo.png';
注意：别名末尾的 / 在 paths 中必须显式写出（如 "@/*"），否则 @utils 这种无尾斜杠的写法无法匹配子路径。
4. 验证是否生效
修改配置后重启开发服务器，并检查以下几点：
- VS Code 中 Ctrl+点击能否正确跳转到目标文件
- 终端运行
tsc --noEmit无路径相关报错 - 页面正常加载，控制台无 404 或模块解析错误
若跳转失败，优先检查 tsconfig.json 中 baseUrl 是否为 "."，以及 paths 键名是否与 Vite alias 完全一致（包括大小写和斜杠）。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
