vite + react + ts 配置路径别名alias

vite + react + ts 配置路径别名alias

首先下载 @types/node 包

path 模块是 node.js 的内置模块，而 node.js 默认不支持 ts 文件的，所以需要安装 @type/node 依赖包

npm install @types/node --save-dev

第一步配置 tsconfig.js

在 compilerOptions 中添加 baseUrl 和 paths。根据需要进行配置路径别名。
不配置这一步，@/ 就不会生效。

{
    "compilerOptions":{
        ......
         "baseUrl": "./",
         "paths": {
           "@/*": [
             "./src/*"
           ]
         }
        ...
    }
}   
   
1
2
3
4
5
6
7
8
9
10
11
12
13

第二部配置vite.config.js

配置 vite.config.js 的路径别名。
配置之后 npm run dev 的时候才不会提示是否安装你 @/ 之后的路径。

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

1
2
3
4
5
6
7
8
9
10
11
12