1. 首先配置webpack。
在webpack的resolve配置项里面配置你需要的别名,alias设置直接在webpack的base配置里面设置就行了。例如:
// webpack.base.js
const path = require('path');
...
module.exports = {
...
resolve: {
...
alias: {
"@api": path.join(__dirname, 'api'), // 注意这个路径是相对webpack.base.js的路径
"@utils": path.join(__dirname, 'utils')
}
}
}
2. 然后配置tsconfig.json
如果没有这个文件,在项目根目录新建一个就行,然后配置compilerOptions对象:
{
"compilerOptions": {
...
"baseUrl": ".",
"paths": {
"@api": ["src/api"], // 如果要使用index.tsx的,需要配置这个
"@api/*": ["src/api/*"], // 要使用别名下的模块的,配置这个。
"@utils/*": ["src/utils/*"],
"@utils": ["src/utils/index.ts"]
}
},
...
}
最后重启项目
就行了。