react + typescript + antd 配置craco-alias別名


1、項目根目錄創建tsconfig.extend.json文件

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@src/*": ["./*"],
      "@api/*": ["./api/*"],
      "@app/*": ["./app/*"],
      "@assets/*": ["./assets/*"],
      "@components/*": ["./components/*"],
      "@utils/*": ["./utils/*"]
    }
  }
}
 
2、根目錄文件tsconfig.json配置
新增 "extends": "./tsconfig.extend.json"

 

 

3、根目錄craco.config.js文件配置

const CracoAlias = require("craco-alias");
module.exports = {
  
plugins: [
  {
    plugin: CracoAlias,
    options: {
      source: "tsconfig",
      baseUrl: "./src",
      tsConfigPath: "./tsconfig.extend.json",
    }
  }
]
}
 
4、npm start 重啟項目。
 
5、使用 
import logo from '@assets/home/logo.png';
 
<img src={logo} alt="logo" />

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM