React 学习——别名路径配置(可以使用@代表src)，引用文件时使用；联想路径提示

一.别名路径配置

1、安装craco （npm i -D @craco/craco）；安装成功的截图如下：

2、在项目的根目录下创建一个 名为 craco.config.js 文件；（必须是根目录下，名称必须和我这个一样），文件里的配置代码，直接复制我的代码就行；

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

3、修改启动和打包命令；在package.json文件中，改成如下：

 "start": "craco start",
 "build": "craco build",

4、测试修改是否生效；改成@后项目还能正常访问，就说明生效了

import App from './App'; //没配置之前的


import App from '@/App'; //修改成 @ 的引用地址，看项目是否正常访问不报错

---

二.联想路径提示

1、项目根目录下加  jsconfig.json  文件；（必须是根目录下，名称也必须跟我的一样）；文件里的内容如下，直接复制我的代码就行；

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

2、测试成功