项目配置 src 别名

在开发过程中，随着项目规模的增长，文件之间的引用关系可能会变得复杂。如果使用相对路径引用模块，会导致代码可读性和维护性变差。例如：

import MyComponent from '../../components/MyComponent.vue';

问题

• ../../ 这样的相对路径不直观，难以管理。
• 如果文件层级发生变化，所有相关的导入路径都需要调整。

为了解决这个问题，我们可以给 src 目录配置别名，这样就可以使用更清晰的方式导入模块：

import MyComponent from '@/components/MyComponent.vue';

---

1. 在 Vite 中配置 src 别名

修改 vite.config.ts

在 Vite 项目中，我们需要在 vite.config.ts 中添加别名配置，让 @ 代表 src 目录。

// vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'), // 配置 `@` 代表 `src` 目录
    },
  },
});

说明

1. import path from 'path'：引入 path 模块，用于解析绝对路径。
2. alias: { '@': path.resolve(__dirname, 'src') }：
   • @ 代表 src 目录，可以直接使用 @ 引入文件，无需使用相对路径 ../../。
   • path.resolve(__dirname, 'src')：获取 src 目录的绝对路径。

---

2. 在 TypeScript 中配置 src 别名

Vite 只负责模块解析，但 TypeScript 本身也需要知道这个别名规则，否则可能会出现无法解析模块的错误。因此，我们还需要在 tsconfig.json 中配置别名。

修改 tsconfig.json

{
  "compilerOptions": {
    "baseUrl": "./", // 解析非相对模块的基地址，默认是当前目录
    "paths": {
      "@/*": ["src/*"] // 配置 `@` 代表 `src`
    }
  }
}

说明

1. "baseUrl": "./"：

   • 设置 baseUrl 让 TypeScript 在当前目录 (./) 解析非相对路径模块。

2. "paths": { "@/*": ["src/*"] }：

   • 这告诉 TypeScript：@/ 开头的路径都映射到 src/ 目录。

   • 例如：

     import MyComponent from '@/components/MyComponent.vue';
     

     TypeScript 会解析为：

     import MyComponent from './src/components/MyComponent.vue';
     

---

3. 测试 src 别名是否生效

配置完成后，我们可以在项目中测试别名的使用。

测试组件导入

假设我们有一个组件 src/components/MyComponent.vue，现在可以在 src/views/Home.vue 中这样引入：

import MyComponent from '@/components/MyComponent.vue';

如果 Vite 运行正常，且 TypeScript 没有报错，说明 @ 别名已经成功生效 🎉。

测试 API 请求

如果你的项目有 API 请求文件，比如 src/api/user.ts，那么可以这样导入：

import { getUserInfo } from '@/api/user';

避免使用 ../../api/user 这种不直观的写法。