你是否在 Vue、React 或 TypeScript 项目中写过这样的导入语句？

import utils from '../../../utils/index';
import Header from '../../../../components/Header.vue';

路径又长又难记，还容易出错？其实，通过简单配置 tsconfig.json 中的 路径别名（Path Mapping），我们就能用 @/ 代替 src/，写出干净优雅的代码：

import utils from '@/utils';
import Header from '@/components/Header.vue';

但光改 tsconfig.json 还不够——VSCode 默认并不识别这些别名，会导致：

  1. 点击跳转失效

  2. 自动导入不工作

  3. 智能提示丢失

怎么办？答案是：确保你的 tsconfig.json 配置正确，并被 VSCode 正确加载。

✅ 正确配置 tsconfig.json

在项目根目录的 tsconfig.json（或 jsconfig.json）中添加：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
 "include": [
    "src/**/*"
  ],
  "exclude": ["node_modules", "dist"]
}

各字段说明：

  • baseUrl: "."：以项目根目录为基准

  • paths: 定义别名映射，@/* 指向 src/*

  • exclude：排除无关目录，提升性能

💡 如果你用的是纯 JavaScript 项目（无 TypeScript），请将文件命名为 jsconfig.json，作用相同。

🔍 为什么 VSCode 需要这个配置？

VSCode 的 TypeScript/JavaScript 语言服务会自动读取 tsconfig.json 或 jsconfig.json。一旦检测到 paths 配置，它就会：

  • ✅ 支持 @/xxx 的路径跳转（Ctrl+点击）

  • ✅ 自动补全别名路径

  • ✅ 正确解析模块，避免红色波浪线报错

⚠️ 注意：如果你使用 Vite、Webpack 等构建工具，还需在构建配置中同步设置别名（如 Vite 的 resolve.alias），否则项目可能无法运行。但 VSCode 的智能提示只依赖 tsconfig.json / jsconfig.json。

🧪 验证是否生效

  1. 重启 VSCode（或重载窗口：Ctrl+Shift+P → 输入 “Reload Window”）

  2. 在任意文件中输入 import xxx from '@/，看是否有自动提示

  3. 尝试 Ctrl+点击路径，能否跳转到 src/ 下对应文件

  4. 如果一切正常，恭喜你！开发体验瞬间升级 ✨

📝总结

  • 路径别名让代码更简洁、可维护性更高；

  • tsconfig.json / jsconfig.json 是 VSCode 识别别名的关键；

  • 构建工具（Vite/Webpack）和编辑器配置需分别设置，二者缺一不可。

🌰个人喜好，可以参考哈

光有 VSCode 配置还不够！构建工具也必须知道 @ 是什么，否则打包或开发服务器会报错。在 vite.config.ts（或 .js）中添加 resolve.alias：

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import {fileURLToPath, URL} from 'node:url'
// https://vite.dev/config/
export default defineConfig({
    plugins: [vue()],
    server: {
        host: '0.0.0.0',
        port: 3981,
        open: true,
        // 代理服务器
        proxy: {
            '/api': {
                target: 'http://localhost:8054/api',
                changeOrigin: true,
                rewrite: (path) => path.replace(/^\/api/, '')
            }
        }
    },
    // 路径别名
    resolve: {
        alias: {
            '@': fileURLToPath(new URL('./src', import.meta.url)),
        },
    },
})