react配置绝对路径@

最新推荐文章于 2024-08-26 10:29:38 发布
最新推荐文章于 2024-08-26 10:29:38 发布
阅读量480 收藏 8
点赞数 9
文章标签： react.js 前端 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_71337486/article/details/136449700
版权
本文介绍了如何在React项目中，通过修改Webpack.config.js的alias配置，将目录路径..转换为@，以便于在代码中使用绝对路径。步骤包括运行npmruneject、定位相关配置并进行替换。
摘要由CSDN通过智能技术生成 
/**
 * react配置绝对路径将 ../  转换为 @
 * 1、运行 npm run eject 将react中的webpack.config.js文件暴露出来
 * 2、在config/webpack.config.js中找到如下代码
 *    resolve: {
 *      alias: {
 *        '@': paths.appSrc // 配置内容
 *      }
 *    }
 *  3、重新运行
 *  4、在需要的地方进行替换
 */

one、two、three，go
关注
React 配置路径别名(绝对路径) @ 和 配置视口单位插件(屏幕适配)
Zeng_Z_H的博客
02-23 1174
配置文档地址 https://github.com/gsoft-inc/craco/blob/master/packages/craco/README.md#configurationhttps://github.com/gsoft-inc/craco/blob/master/packages/craco/README.md#configuration下面为提取的操作步骤 1.安装修改 CRA 配置的包： npm i-D @craco/craco 2.在项目根目录中创建 craco 的配置文件：c.
React-Ts项目中配置路径别名@
wisuky的博客
06-15 886
react-ts项目配置路径别名
React之项目中使用绝对路径
subsistent的博客
08-14 266
在"compilerOptions"属性里加一个属性与值： "baseUrl": "src"在项目中可以通过绝对路径导入，基础路径已经配置为src文件夹了，如。项目时，需要引入一些文件，如果都是使用相对路径，会很麻烦。在项目根目录的tsconfig.json里。
react 项目配置别名路径@
weixin_45561719的博客
08-26 126
【代码】react 项目配置别名路径@
react项目配置绝对路径
Tanjc518的博客
01-03 1215
react项目配置决定路径 解包npm run eject 或者 yarn eject 在webpack.config.js文件alias对象配置 pages: path.join(__dirname, '../src/', 'pages'), assets: path.join(__dirname, '../src/', 'assets'), components: path.join(__dirname, '../src/', 'componen
react配置文件绝对路径
Time_Flies_lei的博客
04-27 795
由于webpack隐藏了配置文件需要先暴露出来，进入项目目录后在cmd中运行以下代码 npm run eject 你确定要退出吗？这种行为是永久的。 输入y 然后回车 运行结束后在项目文件夹中找到config文件夹 打开webpack.config.js 按下 Ctrl+f 查找 alias 找到配置项 配置一下映射，可以参照以下我的配置 alias: { "react-native": "react-native-web", ...(isEnvProduct...
react配置之绝对路径
热门推荐
往后余生的博客
07-02 1万+
绝对路径不多bb，简单的说就是，我们不再使用 ../  ../../之类的来表示路径位置了 直接上代码 我用的是react-crate-app脚手架    npm install react-create-app -g react-create-app my-react cd my-react npm install npm run ejecj 得到想要的了 再config 中的...
Typescript,react中配置路径别名@与@别名路径提示
weixin_58207509的博客
11-27 684
以后补上
React中使Vscode识别@路径并给出路径提示
数组喜欢打对象的博客
11-17 1272
步骤1: 在项目根目录创建 jsconfig.json 配置文件 在配置文件中添加以下配置 jsconfig.json 中： { "compilerOptions": { "target": "ES6", "module": "commonjs", "allowSyntheticDefaultImports": true, "baseUrl": "./", "paths": {
配置 @ 符号表示跟路径并且自动提示
m0_64564920的博客
04-07 891
前言 当我们在项目中引入文件的时候，如果这个文件藏的比较深，需要一层一层的 ./ 找出去，这样就比较麻烦，开发效率也不高。为了提高开发效率，我们可以配置从根路径 src 去查找。一般我们用 @ 符号代表根路径，这样别人一看就知道是从 src 出发找文件的。 那么 @ 符号应该怎么配置呢？ 1、需要下载一个修改 CRA 配置包 npm i -D @craco/craco // 或者 yarn add @craco/craco 2、创建 craco 的配置文件 craco.config.js 文件代码如
react中配置绝对路径
xy19950125的博客
09-25 3285
在react中 如果想使用例如img的东西 它不像vue里面直接拿过来使用 react则需要手动引入 但是当项目目录嵌套太深的时候 很容易出现错误 有没有什么简单的方式呢 那肯定会有的了 react官网里面其实也有告诉配置的 只是不细心的人可能找不到 说白点 就是配置成绝对路径 看看到底该怎么配置吧 1. 在根目录下创建一个jsconfig.json文件（是根目录 而非src 相当于是和src...
配置React项目@路径
weixin_45961018的博客
05-22 1097
在日常项目开发时，我们会经常遇到引入文件时文件路径繁琐带来的困扰。对于vue项目而言，config.js文件在项目创建完成时就会暴露出来，但是React项目在创建完成时，webpack.config.js文件不会暴露出来，虽然可以执行npm run eject命令强行暴露出来，但此行为是不可逆的，慎重！
react项目中使用绝对路径
weixin_43228393的博客
04-03 242
在项目的根目录创建一个名为jsconfig.json的文件，粘贴以下内容后，重启项目即可。之前项目中经常见到的@/path，这种绝对路径有 不能点击跳转到引用源 的问题。下面是使用的截图，很简单。
react配置src根目录（绝对路径）
GreyCastle的博客
10-10 4411
前言： 做项目的时候需要引入很多文件，当引入文件路径的时候感觉写的路径很长，这就感到很难受了，万一在碰见哪个客户提出多加一层目录混蛋需求这就又要改。所以直接配置成绝对路径，管他加几个目录我找到的就是根路径。 下面看下怎样配置吧： ...
如何在React中使用@符书写文件路径
月光晒了很凉快的博客
09-26 1110
目录，极大的简化了我们对路径的书写。但是 react 中，要想实现这种方式书写文件路径，需要写配置文件来实现。但是在书写时，并不会触发编辑器的提示，没有提示写起来很痛苦，所以我们还需要再写一个配置文件，用作触发书写带有。温馨提示：在 react 项目中，修改配置文件后需要重启项目。上面的两种方案，任选一种即可完成配置，此时我们已经能够实现用。在 Vue 中，我们导入文件时，文件路径中可以使用。符的文件路径时，编辑器的自动提示功能。至此，我们就可以愉快地书写代码了。
React中配置@
haodanzj的博客
06-08 1132
React中配置@
react中配置@
浩星
09-15 3085
前言： 但是在react中，不能直接使用@，需要更改webpack的相关配置。 前提： 先把build文件夹弄出来，如果没有，一定注意本地不能有任何文件，必须提交完，最好新建项目直接输入效果最好 npm run eject 操作步骤： config/webpack.config.js文件的alias中插入代码 '@': path.resolve('src') ...
react中如何使用@来获取本地图片
最新发布
09-11
通常的做法是在项目的文件结构中创建一个如`images`或`assets`这样的文件夹来存放图片资源，然后使用`import`语句引入图片，通过相对路径或绝对路径来引用它。例如，如果你有一个图片文件位于`src/assets/images/...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值