react-别名路径配置

    在前端开发中，别名路径配置（Alias Path Configuration）是一种通过配置工具或框架，将特定的路径别名映射到实际文件路径的方法。这样可以简化文件引用路径，提高代码的可读性和维护性。

为什么要进行别名路径配置？

        在我们做项目的时候一定会引入文件，如果要引入的文件层级太深的话肯定会出现很多 '../../../../../'，会增加一些不必要的麻烦。所以我们通过@替代src路径，方便开发过程中的路径查找访问。

 别名路径配置

1.  路径解析配置（对 webpack ），把@/解析为src/
2.  路径联想配置（对 VSCode ），VSCode 在输入@/时，自动联想出来对应对src/下的子级目录

路径解析配置

 

安装

npm i @craco/craco -D

在根目录下创建 craco.config.js 文件，在文件中进行配置 

 

const path = require('path')
 
module.exports = {
  //webpack配置  
  webpack:{
    //配置别名
    alias:{
      //约定：使用@表示src文件所在路径  
      '@':path.resolve(__dirname,'src')
    }
  }
}

在package.json 文件中更改启动和打包命令

  "scripts": {
    "start": "craco start",
    "build": "craco build",
  },

在页面中通过@/会解析为src/

路径联想配置

Vscode的路径联想配置，需要我们在项目目录下添加jsconfig.json文件，加入配置之后Vscode会自动读取配置帮助我们自动联想提示

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

 配置成功在代码中就会有提示