在 VS Code 中，你可以通过配置 jsconfig.json 或 tsconfig.json 文件来实现路径别名，这样你就可以使用 @ 符号来代替某个路径

tsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",//这是解析非相对模块名的基目录，它被设置为 `"."`，表示当前目录。
    "paths": {
      "@/*": ["src/*"]//将 `@` 符号映射到了 `"src/"` 目录
    },
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "strict": true,
    "jsx": "preserve",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": ["ESNext", "DOM"],
    "skipLibCheck": true,
    "noEmit": true,
    "typeRoots": [
      "src/types"
    ]
  },

  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue","src/types/**/*.d.ts"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': '/src'
    }
  },
  server:{
    host: '0.0.0.0'
  },
 
})

• baseUrl: 这是解析非相对模块名的基目录。在这个例子中，它被设置为 "."，表示当前目录。
• paths: 这是一个路径映射列表，用于将模块名映射到相对于 baseUrl 的路径。在这个例子中，它将 @ 符号映射到了 "src/" 目录。
• target: 指定 ECMAScript 目标版本。"ESNext" 指的是最新的 ECMAScript 版本。
• useDefineForClassFields: 启用这个选项可以使用 ECMAScript 的类字段提案。
• module: 指定模块代码生成的环境。"ESNext" 表示生成遵循最新的 ECMAScript 标准的模块代码。
• moduleResolution: 指定模块解析策略。"Node" 表示使用 Node.js 的模块解析策略。
• strict: 启用所有严格类型检查选项。
• jsx: 指定 JSX 代码的生成方式。"preserve" 表示保留 JSX 代码，以供后续的转换步骤（如 Babel）处理。
• resolveJsonModule: 允许导入 JSON 模块。
• isolatedModules: 确保每个文件可以单独编译。
• esModuleInterop: 通过为所有导入创建命名空间对象，启用 CommonJS 和 ES 模块之间的互操作性。
• lib: 指定要包含在编译中的库文件。"ESNext" 和 "DOM" 分别表示包含最新的 ECMAScript 特性和 DOM API。
• skipLibCheck: 跳过声明文件（*.d.ts）的类型检查。
• noEmit: 不生成编译结果。