【React】路径别名配置

谢尔登2023-12-01 8:10

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

1. 路径解析配置

安装craco npm i -D @craco/craco
项目根目录下创建配置文件craco.config.js
配置文件中添加路径解析配置
包文件中配置启动和打包命令

js 复制代码

// craco.config.js

const path = require('path');

module.exports = {
  webpack: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  }
}

json 复制代码

// package.json

  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

craco start & npm run server 可以合并命令，用 npm run start 一起执行。

2. 联想路径配置

根目录下新增配置文件 - jsconfig.json
添加路径提示配置

json 复制代码

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