使用相对路径进行模块引入,碰到路径比较深时,会非常不方便,因为项目代码都在 src 目录下,如果可以以 src 目录为根目录,进行类似绝对路径引入,在引入时会更方便。

配置 @ 表示 src 目录

添加依赖

yarn add path

配置 vite.config.ts

resolve 选项中配置 alias 别名

import { resolve } from "path"

export default defineConfig({
    plugins: [vue()],
    resolve: {
        alias: [
            {
                find: '@',
                replacement: resolve(__dirname, './src'),
            }
        ]
    }
})

配置 tsconfig.json

compilerOptions 选择中增加 baseUrlpaths 配置

{
    "compilerOptions": {
        // ...省略其它配置项
        "baseUrl": ".",
        "paths": {
            "@/*": [ "src/*" ]
        }
    }
}
Logo

前往低代码交流专区

更多推荐