React之项目中使用绝对路径

最新推荐文章于 2024-03-04 13:28:09 发布
最新推荐文章于 2024-03-04 13:28:09 发布
阅读量1.2k 收藏 2
点赞数
分类专栏： react 文章标签： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/welkin_qing/article/details/109848282
版权

文章目录

一、问题详情

在开发React项目时，需要引入一些文件会很麻烦，比如
前面会有一大堆....

import PageTitle from '../../../components/pageTitle/pageTitle'

二、解决办法

  1. 根目录创建tsconfig.json文件，与src文件平级
  2. 写入以下内容
{
    "compilerOptions":{
        "baseUrl":"src"
    },
    "include":["src"]
}
  1. 项目中不使用...直接输入文件夹名字就可以直接访问了
import PageTitle from 'components/pageTitle/pageTitle'
Welkin_qing
关注
专栏目录
React-Ts项目中配置路径别名@
wisuky的博客
06-15 914
react-ts项目配置路径别名
React 配置路径别名(绝对路径) @ 和 配置视口单位插件(屏幕适配)
Zeng_Z_H的博客
02-23 1187
配置文档地址 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项目配置绝对路径
Tanjc518的博客
01-03 1229
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配置绝对路径@
最新发布
one、two、three，go的博客
03-04 494
【代码】react配置绝对路径@
react中配置绝对路径
xy19950125的博客
09-25 3294
在react中 如果想使用例如img的东西 它不像vue里面直接拿过来使用 react则需要手动引入 但是当项目目录嵌套太深的时候 很容易出现错误 有没有什么简单的方式呢 那肯定会有的了 react官网里面其实也有告诉配置的 只是不细心的人可能找不到 说白点 就是配置成绝对路径 看看到底该怎么配置吧 1. 在根目录下创建一个jsconfig.json文件（是根目录 而非src 相当于是和src...
react 图片绝对路径,使用React + Webpack时如何使用绝对路径导入自定义scss？
05-13
在 React + Webpack 项目中，使用绝对路径导入自定义 SCSS 文件可以通过以下步骤实现： 1. 在 webpack.config.js 中配置 alias，将自定义 SCSS 文件夹路径设置为别名。例如： ``` const path = require('path'); ...
React中使Vscode识别@路径并给出路径提示
数组喜欢打对象的博客
11-17 1285
步骤1: 在项目根目录创建 jsconfig.json 配置文件 在配置文件中添加以下配置 jsconfig.json 中： { "compilerOptions": { "target": "ES6", "module": "commonjs", "allowSyntheticDefaultImports": true, "baseUrl": "./", "paths": {
React使用build生成项目：资源文件路径"/"修改为相对路径"."
热门推荐
amoxu
07-07 1万+
React使用build生成项目：资源文件路径"/"修改为相对路径"."React使用build生成项目：资源文件路径"/"修改为相对路径"."yarn build 指定相对路径拓展为任意构建环境定制环境变量帮助文档 React使用build生成项目：资源文件路径"/“修改为相对路径”." 一直想学习一个前端框架，看中react很久，最近终于对它下手了。在踩了js加载及渲染顺序的坑之后，发布也遇到...
react绝对路径_react import改为绝对路径
weixin_39640444的博客
12-22 232
最近在使用react时发现路径用../../很不方便，特别是修改项目结构时，加减../都能改到吐血，所有在网上找了半天webpack的配置，特此记录下module.exports = (webpackConfig) => {const config = Object.create(webpackConfig);config.resolve = {extensions: ['.js', '.j...
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 中的...
React项目如何使用绝对路径@
Alice9969的博客
11-17 1985
转载：https://www.jianshu.com/p/7d0c8683e983 1. 找到 config目录下webpack.config.js文件配置 2. alias 内容下增加 '@': path.resolve('src'), 3.重新启动项目 4.在文件中使用绝对路径（@） 5.成功；
react项目中import使用绝对路径
AdleyTales的技术博客
10-14 2058
在项目的根目录下创建jsconfig.json文件 { "compilerOptions": { "baseUrl": "src" }, "include": ["src"] } 重启项目 使用
react配置src根目录（绝对路径）
GreyCastle的博客
10-10 4429
前言： 做项目的时候需要引入很多文件，当引入文件路径的时候感觉写的路径很长，这就感到很难受了，万一在碰见哪个客户提出多加一层目录混蛋需求这就又要改。所以直接配置成绝对路径，管他加几个目录我找到的就是根路径。 下面看下怎样配置吧： ...
react项目中使用绝对路径
weixin_43228393的博客
04-03 249
在项目的根目录创建一个名为jsconfig.json的文件，粘贴以下内容后，重启项目即可。之前项目中经常见到的@/path，这种绝对路径有 不能点击跳转到引用源 的问题。下面是使用的截图，很简单。
react绝对路径_Create React app 引用中使用绝对路径
weixin_39704246的博客
12-22 364
阅读本文只需6分钟随着Create React App 3的发布，我们现在引入组件或对象时可以使用绝对路径(absolute import),而不需要eject项目。哈利路亚。也许不用我解释你也知道这一利好，不过我还是总结一下好处。输入路径更加容易, 不再需要 ../../../../地狱模式你可以复制/粘贴代码包括导入到其他文件中，而不需要修改引用路径你可以移动文件而不需要更新引用路径(假如你的...
react 前端读取 文件内容
newpepole的博客
11-23 5873
项目有一个需求，将某个信息存在记事本文件中，前端将文件内容读出来并存下来，将这些信息作为参数传给后台 因为项目的环境就选用的是。react+antd 方式实现，Upload组件在上传前的事件中截取下来 前端拿到的是一个json数据，需要读取文件才行 引用的文件： import { Button, Form, Upload } from "antd"; import { UploadOutlined } from '@ant-design/icons'; 正文的方法 const uploadAr
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值