React配置src根目录@

于 2024-01-18 09:28:35 发布
阅读量1.2k 收藏 9
点赞数 6
分类专栏： react 文章标签： reactjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_68324632/article/details/126503189
版权

文章目录

1.打开webpack配置文件

yarn eject or npm run eject

如果报错了记得提前 git commit一下
请添加图片描述

2.配置webpack

请添加图片描述

  1. 找到 webpack.config.js 文件
  2. 在 webpack.config.js 文件中找到 alias 配置
  3. 在alias里添加'@': path.resolve('src') , 或者 '@': path.join(__dirname,'../src'),
    请添加图片描述
  4. 重新npm start即可
顽皮宝
关注
  • 6
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React中使Vscode识别@路径并给出路径提示
数组喜欢打对象的博客
11-17 1181
步骤1: 在项目根目录创建 jsconfig.json 配置文件 在配置文件中添加以下配置 jsconfig.json 中： { "compilerOptions": { "target": "ES6", "module": "commonjs", "allowSyntheticDefaultImports": true, "baseUrl": "./", "paths": {
在react native中使用阿里iconfont图标
01-08
3.在根目录中配置react-native.config.js文件 (以前是在rnpm配置，在package.json配置rnpm会有警告) module.exports = { assets: ['./src/assets/fonts/'], }; 目录结构 4.在终端使用以下命令，建立图标的联系 ...
react-app-rewire-alias:别名和多个src目录，用于重新连接create-react-app
05-03
用于重新连接的create-react-app的Alias解决方案 这不仅仅是简单的别名。 这也是一个多项目src目录。 当前， create-react-app （CRA）在项目中不支持多个src目录。 Monorepo，multi-repo和带有示例的库项目需要多个目录，例如src 。 这只是CRA的别名和多源解决方案，而不是等多包管理工具的替代品。 这需要在运行时修改CRA Webpack配置（不弹出），并且可以使用以下之一： （请参阅下面的“ ） 这允许： 优质，安全的外部src出口 绝对进口 具有Babel和CRA功能的src外部根目录下的任何./directory目录 这是专为： monorepo项目 多仓库项目 带有示例的图书馆项目 与其他解决方案相比的优势： 提供了功能齐全的别名，并允许在src之外使用Babel，JSX等（ root之外，请参见以下部分）
【react】在create-react-app项目中使用图片路径的三种方式，亲测有效
AC_greener的博客
02-26 4743
1. 引入图片：import imgUrl from ‘…/src/a.jpg’, render() { return ( <div > <img src={imgUrl } /> </div> ); } 2. 利用webpa...
react配置src根目录（绝对路径）
故里的博客
08-04 1108
网上搜了很多方法，让安装react-app-rewired 依赖，在根目录新增一个config-overrides.js文件，并修改package.json中的scripts配置信息，结果在启动项目的时候报错。 下边的配置方法，亲测有效~ 1.找到node_modules/react-scripts/config/webpack.config.js (或者在编辑器中直接搜索文件webpack.config.js)。 2.找到alias 3.添加下面的代码 '@': path.resolve('src'
关于在react项目中img标签src的路径问题
sakura的博客
09-16 4261
关于在react项目中img标签src的路径问题 ​ 公司要求开发一个静态页面，那这当然需要用img标签放些图片作为背景。之前我的做法是把images这个文件夹放在站点的子目录里面，然后通过站点ip加上路径就可以直接访问到，类似这样： //10.0.249.15为该站点ip，斜杠“/”后面表示为路径。 http://10.0.249.15/secssc/images/background3.png ​ 然后这样就把路径写死了，换个环境显然是行不通的。 ​ 那就把img放在本地路径呗。类似这样 <i
react项目配置 @ 为src根目录
wangshang1320的博客
06-08 1317
若已经使用 “npm run eject” 暴露了webpack.config.js文件。修改 config/webpack.config.js 文件配置(找到alias)修改jsconfig.json文件。用craco来配置 （参考文章）
react @指向src 配置
oihezz的博客
07-10 1656
react配置 @指向src import login from '@/pages/login' 1.创建react项目 create-react-app 项目名字 2.进入创建的项目根目录，解压相关依赖 npm run eject 3.解压之后，根目录会暴露出config文件夹。找到webpack.config.js → alias，新增 代码："@": paths.appSrc, alias: { "@": paths.appSrc, }, 4.重启项目即可
React添加文件路径时使用@符号代替src目录（非creae-react-app）
最新发布
asd0654123的博客
10-14 616
非cra脚手架的react项目，配置@符号来代替src目录
react 配置 @ 为根目录
大路宽宽的博客
12-16 860
react 配置 @ 为根目录 两种方式
react 配置组件路径引用 @ 来表示src根路径
qq_40011214的博客
09-13 1508
create-react-app 创建的项目，看不到 webpack 相关的配置文件，需要先暴露出来，使用如下命令即可 npm run eject 在config中修改配置文件 webpack.config.js resolve: { ... alias: { ... // 路径引用 @ '@': paths.appSrc, } } 重新启动项目 ...
hdrp-test:HDR配置文件的React版本的测试器
05-10
从项目根目录再次运行两个服务器。 请注意，如果您从client目录运行npm start ，它将运行客户端开发服务器，而不运行后端服务器。 目录 目录 这里面是什么 server 服务器一半； 当前只是一个JSON文件，可以静态...
DebugReact:调试React
03-24
##说明本项目用于调试源码，即修改配置为项目中引用的react包来自src / react，使得我们可以在src / react下进行调试和打日志调试。 ##使用步骤 在根目录下安装： 下载react包到src下，并按照下面的修改配置步骤...
react-native-template-sishu-0.59:私塾国际学府React Native团队开箱即用项目模板
03-15
:sparkles:与默认的React Native模板一致优雅地集成式axios，mobx，React导航使用一个有经验的项目目录结构使用一个有经验的VSCode配置支持相对根目录约会文件（默认根目录src）优雅地声明变量变量（通过定义命名...
React 添加引用路径时,使用@符号作为src文件
MS6324_ZAKU的博客
05-29 2287
在react引用组件时,我们经常会遇到下图的情况 '…/…/…/'来指代文件所在文件夹的文职 这种’…/'很不美观也很难读,看着就很复杂,很难读,不能一眼知道文件所在的位置情况 在vue中,我们可以使用@来指代src文件夹 那么在react中,怎么使用@符号指代src文件夹呢? 因为我的项目有用到antd,所以直接使用craco来配置 引入craco $ yarn add @craco/craco 修改package.json文件,将craco作为执行文件 /* package.json */
React使用“@“作为src文件
m0_47946425的博客
01-13 445
React使用"@"作为src文件 暴露webpack的config文件 1.$npm run eject 2.在config/webpack.config.js文件的alias中插入代码 alias: { ........ '@': path.resolve('src'), }, 重新执行 npm start
React配置@src根路径
oops
01-26 2610
我们通过create-react-app脚手架搭建的项目其中的webpack配置文件都是被封装起来的，项目中我们需要使用@src配置根路径，从而方便使用绝对路径的话，就需要去把webpack抽离出来进行修改。   执行 npm run eject （此操作是不可逆的！） 执行完成后，项目目录中会多出两个文件夹config和scripts 在config中找到webpack.config.js文件 在alias中添加'@src': path.resolve('src') alias: { /
react中的目录规范
qq_41632427的博客
06-10 132
​ 目录 前言 导语 目录规范 总结 前言 我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷 导语 日常的工作中 我们难免会有关于工作的一些规范 还是需要遵守的 这边大概展示一下自己项目中...
react 配置@根路径
名人卷耶
07-06 910
1、执行命令 npm run eject npm run eject 命令无法撤销 执行后，会出现config 和scripts 两个文件夹 2、找到暴露的config 下的 webpack.config.js 文件，在alias插入： '@': path.resolve('src'), alias: { '@': path.resolve('src'), // Support React Native Web // https://www.s
react vite 配置路由
09-10
要在React Vite项目中配置路由，你可以按照以下步骤进行操作： 1. 首先，安装所需的依赖包。在项目根目录下运行以下命令： ``` npm install react-router-dom ``` 2. 创建一个新的文件夹（例如：`src/router`），用于存放路由相关的文件。 3. 在该文件夹中创建一个新的文件（例如：`index.js`），用于配置路由。在该文件中，你可以导入所需的组件和React Router相关的模块。 ```jsx import React from 'react'; import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'; // 导入你的页面组件 import Home from '../pages/Home'; import About from '../pages/About'; function AppRouter() { return ( <Router> <Switch> <Route exact path="/" component={Home} /> <Route path="/about" component={About} /> {/* 添加更多的路由规则 */} </Switch> </Router> ); } export default AppRouter; ``` 在上面的代码中，我们使用`BrowserRouter`作为路由容器，`Switch`用于确保只有一个路由能够匹配，`Route`用于定义具体的路由规则，包括路径和对应的组件。 4. 在根组件中使用路由。在你的根组件（通常是`App.js`）中导入并渲染路由组件。 ```jsx import React from 'react'; import AppRouter from './router'; function App() { return ( <div className="App"> <AppRouter /> </div> ); } export default App; ``` 这样，你就完成了React Vite项目的路由配置。你可以根据需要添加更多的路由规则，并在对应的组件中处理路由导航和页面渲染。记得根据你的项目结构和需求，调整文件路径和导入语句。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值