vite.config.ts配置alias

### 在 `vite.config.ts` 中配置路径别名

为了在 Vue + TypeScript + Vite 项目中配置路径别名，可以在 `vite.config.ts` 和 `tsconfig.json` 文件中分别进行相应的设置。

#### 修改 `vite.config.ts`

通过安装 `@types/node` 来获得 Node.js 的类型声明支持，在 `vite.config.ts` 使用来自 `path` 模块的帮助函数来解析绝对路径：

import { defineConfig, loadEnv } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';

export default ({ mode }) => {
    process.env = {...process.env, ...loadEnv(mode, process.cwd())};

    return defineConfig({
        plugins: [vue()],
        resolve: {
            alias: [
                {
                    find: '@',
                    replacement: path.resolve(__dirname, 'src')
                }
            ]
        }
    });
};

上述代码展示了如何利用 `resolve.alias` 属性创建一个名为 `@` 的别名指向项目的 `src/` 目录[^1]。

#### 更新 `tsconfig.json`

为了让 TypeScript 编译器理解新的模块路径别名，还需要编辑 `tsconfig.json` 添加基础 URL 及路径映射规则:

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

此段 JSON 片段设置了编译选项中的 `baseUrl` 参数为当前工作目录(`.`)，并且指定了 `@` 开头的导入语句应被重定向到相对路径下的 `src/` 子文件夹内寻找匹配的目标模块[^3]。