1.修改vite配置文件

import * as path from 'path'
export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  },
)}

这么做的目的是让vite识别匹配@符为src的绝对路径。

但是这里你导入path会报错 因为我们vite项目是运行在ts环境，在TypeScript文件中我们需要先安装@types/node包，也就是nodejs的声明文件，然后才能在Vite配置文件中使用Node.js中的模块。

运行如下命令：

    npm install --save-dev @types/node

2.修改tsconfig.json文件

这一步是为了让ts可以识别@路径，否则你的文件里会飘红

1.第一步设置baseUrl为当前项目的根路径（src上边那一层）

2.第二步的目的是让ts把“@/”开头的文件路径识别成 “src/”

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "src/*"
      ]
    }
  },
}

3.重启项目

由于我们修改了配置文件，所以做完了以上步骤别忘了重启项目，否则不会生效哦

接下来你就可以在项目中使用@符替换掉夯长的 " ../../../" 的相对路径了 (^▽^)