react項(xiàng)目中@路徑簡(jiǎn)單配置指南
前言
無(wú)論是vue還是react開(kāi)發(fā),我們通常需要引入路徑的便捷化配置,通常我們都會(huì)約定使用路徑@作為根路徑地址。如果是個(gè)人react開(kāi)發(fā)的@路徑簡(jiǎn)單配置
1. 安裝craco
yarn add @craco/craco
2.根路徑下創(chuàng)建 craco.config.js
const path = require("path") module.exports = { webpack:{ alias:{ "@":path.resolve(__dirname,"src") } } }
3. 修改package.json文件的script字段
"scripts": { "start": "craco start", "build": "craco build", "test": "craco test", "eject": "react-scripts eject" },
4.使用
import "@/router/index"
補(bǔ)充:React 配置 @ 路徑別名
第一步安裝依賴
yarn add react-app-rewired customize-cra
第二步修改 package.json 配置,將 react-scripts 修改成 react-app-rewired
"scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", "test": "react-app-rewired test", "eject": "react-scripts eject" },
第三步在根目錄下創(chuàng)建 config-overrides.js 文件
const { override, addWebpackAlias } = require("customize-cra"); const path = require("path"); module.exports = override( //增加路徑別名的處理 addWebpackAlias({ '@': path.resolve('./src') }) );
第四步在 tsconfig.json 文件中加入 baseUrl 和 paths
{ "compilerOptions": { "baseUrl": "src", "paths": { "@/*": [ "*" ] } }
最后重新啟動(dòng)就能通過(guò) @ 引入文件里
import { login } from '@/api/login'
總結(jié)
到此這篇關(guān)于react項(xiàng)目中@路徑簡(jiǎn)單配置的文章就介紹到這了,更多相關(guān)react @路徑配置內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
封裝一個(gè)最簡(jiǎn)單ErrorBoundary組件處理react異常
這篇文章主要介紹了一個(gè)處理react異常的ErrorBoundary組件,簡(jiǎn)單實(shí)用,代碼詳細(xì),對(duì)這個(gè)組件感興趣的朋友可以參考下2021-04-04react項(xiàng)目中express動(dòng)態(tài)路由未能匹配造成的404問(wèn)題解決
本文主要介紹了react項(xiàng)目中express動(dòng)態(tài)路由未能匹配造成的404問(wèn)題解決,解決了白屏的問(wèn)題,具有一定的參考價(jià)值,感興趣的可以了解一下2023-09-09在React框架中實(shí)現(xiàn)一些AngularJS中ng指令的例子
這篇文章主要介紹了在JavaScript的React框架中實(shí)現(xiàn)一些AngularJS指令的例子,React使用Virtual DOM因而與普通的js框架有些不同,需要的朋友可以參考下2016-03-03React從插槽、路由、redux的詳細(xì)過(guò)程
React需要自己開(kāi)發(fā)支持插槽功能,原理:父組件組件中寫(xiě)入的HTML,可以傳入子組件的props中,這篇文章主要介紹了React從插槽、路由、redux的詳細(xì)過(guò)程,需要的朋友可以參考下2022-10-10react antd實(shí)現(xiàn)動(dòng)態(tài)增減表單
antd是react流行的ui框架庫(kù),本文主要介紹了react antd實(shí)現(xiàn)動(dòng)態(tài)增減表單,分享給大家,感興趣的小伙伴們可以參考一下2021-06-06React路由鑒權(quán)的實(shí)現(xiàn)方法
這篇文章主要介紹了React路由鑒權(quán)的實(shí)現(xiàn)方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09使用?React?Hooks?重構(gòu)類(lèi)組件的示例詳解
這篇文章主要介紹了如何使用?React?Hooks?重構(gòu)類(lèi)組件,本文就來(lái)通過(guò)一些常見(jiàn)示例看看如何使用 React Hooks 來(lái)重構(gòu)類(lèi)組件,需要的朋友可以參考下2022-07-07