src别名的配置

在开发项目的时候，文件之间的关系可能很复杂。当存在大量文件时，文件的寻找路径会变的很复杂，可能出现“../../../compoents/project/”这种情况，写起来很麻烦。如果能够在文件寻找时都能从src/下开始找文件，这样就会简单很多。因此需要给src文件夹配置一个别名。

1. 在vite.config.ts文件中配置别名

// vite.config.ts

import path from 'path'

export default defineConfig({
  resolve: {
    alias: {
      // 相对路径别名配置，使用@代替src
      '@': path.resolve('./src')
    }
  }
})

2. TypeScript编译配置

在tsconfig.app.json中配置别名

// tsconfig.app.json
{
  "compilerOptions": {
    "baseUrl": "./", //解析非相对模块的基地址，默认是当前目录
    "paths": {
      // 路径映射，相当于baseUrl
      "@/*": ["src/*"]
    }
  }
}

3. src别名的使用

文件结构如上图所示。

在App.vue文件中导入Test.vue文件时，import语句可以使用别名‘@’。

import Test from '@/components/Test.vue'