在 React 中,我們不能直接使用 @ 去表示 src 文件夾,需要額外的配置
1, 安裝craco工具包
這個(gè)工具包是專(zhuān)門(mén)在(cra-Create React App環(huán)境下擴(kuò)展webpack 的一個(gè)工具包!
npm i @craco/craco -D
2,增加 craco.config.js 配置文件(項(xiàng)目根目錄下增加)
const path = require('path'); module.exports = { // 以下是webpack的配置信息 webpack: { // 配置別名 alias: { '@': path.resolve(__dirname, 'src') // 約定使用 @ 表示 src 文件所在目錄 } } };
3, 修改package.json的script命令
//原來(lái) "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" } //修改后: "scripts": { "start": "craco start", "build": "craco build", "test": "craco test", "eject": "craco eject" }
修改完之后,記得修改項(xiàng)目
4, 路徑聯(lián)想配置(VScode),VScode在輸入@/ 時(shí),自動(dòng)聯(lián)想對(duì)應(yīng)src/ 下的目錄
(1)在根目錄新建jsconfig.json文件
(2)配置
{ "compilerOptions": { "baseUrl": "./", "paths": { "@/*" :["src/*"] } } }