手写VUE后台管理系统2 - 配置@表示src路径

使用相对路径进行模块引入，碰到路径比较深时，会非常不方便，因为项目代码都在 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 选择中增加 baseUrl 及 paths 配置

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