当前位置：首页 > news >正文

Vite+TS项目中配置路径别名

news 2025/2/9 10:45:20

在使用 Vite 和 TypeScript 的项目中配置路径别名，可以简化模块导入路径，提高代码的可读性和维护性。以下是详细的步骤和示例代码：

1. 配置 Vite 别名

前置条件 下载types/node 下面引入的path会用到

npm install @types/node --save-dev

原因：path模块是node.js内置的功能，但是node.js本身并不支持ts，所以需要手动安装
在 vite.config.ts 文件中配置路径别名。

将alias配置为一个对象：

import { defineConfig } from "vite" 
import { resolve } from "path"  
export default defineConfig({ // ...其它配置resolve: { alias: {"@": resolve(__dirname, "src"),images: resolve(__dirname, "src/assets/images"),utils: resolve(__dirname, "src/utils"),},},
})

将alias配置为一个数组：

import { defineConfig } from "vite" 
import { resolve } from "path"
export default defineConfig({  
// ...其它配置resolve: {alias: [{find: /^@\//,replacement: `${resolve(__dirname, "src")}/`,},{find: /^images\//,replacement: `${resolve(__dirname, "src/assets/images")}/`,},{find: /^utils\//,replacement: `${resolve(__dirname, "src/utils")}/`,},], },
})

2. 配置 TypeScript 别名

为了让 TypeScript 编译器识别这些别名，需要在 tsconfig.json 文件中进行相应的配置。

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

3. 使用别名

在项目中使用配置好的别名进行模块导入。

// 使用 @ 别名导入 src 目录下的模块
import MyComponent from "@/components/MyComponent";// 使用 images 别名导入图片
import logo from "images/logo.png";// 使用 utils 别名导入工具函数
import { someUtilityFunction } from "utils/someUtilityFile";