1,在一個項(xiàng)目中,如果在引入文件時, 頻繁用 ../? ? ./ 會很繁瑣,且不易維護(hù)
那么下面講解如何在react中配置路徑別名
1, 安裝 react-app-rewired?customize-cra
????npm install react-app-rewired?customize-cra --save-dev
2,在項(xiàng)目根目錄也就是package.json平級目錄,新建一個config-overrides.js文件
? ?并在js文件中, 書寫以下代碼(為@根路徑配置代碼)
const { override, addWebpackAlias } = require("customize-cra")
const path = require("path");
module.exports=override(
? ? //引入插件寫相關(guān)配置
? addWebpackAlias({
? ? "@" : path.resolve(__dirname, "src")
? })
)
3,在package.json更改 命令
"scripts": {
? ? "dev": "react-app-rewired start",
? ? "build": "react-app-rewired build",
? ? "test": "react-app-rewired test",
? ? "eject": "react-scripts eject"
? },
4,view中使用
這樣通過npm run dev 重啟項(xiàng)目就可以了
