在react内配置@符号

前言

1. 想要在react中使用@符号,我们需要分两步进行,第一步就是让VsCode识别@符号,第二步是让webpag识别

   让vscode识别,在你的项目根目录中创建一个jsconfig.json文件

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

注意:此时代码会报错,提示@符号无法识别,当然,这不是vscode本身报错,而是webpag无法识别,我们接下来就想办法让webpag识别

2.让webpag识别 ,

• 下载craco

npm i -D @craco/craco

• 在项目根目录下创建一个craco.config.js文件
• 在pakage.json中修改读取方式
• 里面代码如下

craco.config.js文件

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

pakage.json文件

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

最后再把代码跑起来,这样就可以在react内使用@标识符了