概括

我们在项目中引入文件基础引入方法需要用到相对路径../，这种方法文件夹目录改变了就会报错

import { pageStatistic } from "../../../../../../api/data-statistics"

以此我们使用以下方式来引入，看起来即不繁琐也简单

import { pageStatistic } from "@/api/data-statistics"

一、vite.config.ts配置

找到根文件 vite.config.ts ，下面注释标明了我添加的配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from "path" // 第一步：下载插件npm i path

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve:{//第二步：配置相对路径别名
    alias:{
      '@':path.resolve('./src'), // 相对路径别名配置，使用@代替src
      '@com':path.resolve('./src/components'),
    }
  },
})

二、tsconfig.json配置

找到根文件 tsconfig.json 添加 "paths": {// 相对路径别名配置 路径映射，相对于baseUrl "@/*":["src/*"], "@com/*":["src/components/*"], }

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve",
    "baseUrl": "./",//默认当前目录
    "paths": {// 相对路径别名配置 路径映射，相对于baseUrl
      "@/*":["src/*"],
      "@com/*":["src/components/*"],
    },

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}