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