create-react-app的自定义配置文件读取

最新推荐文章于 2024-05-13 09:00:00 发布
最新推荐文章于 2024-05-13 09:00:00 发布
阅读量567 收藏
点赞数
文章标签： react.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_34018607/article/details/119079937
版权

实际开发中某些业务配置需要变动，如果写死在代码内，修改起来比较麻烦，所以尝试单独提取出来，方便线上配置的修改。
最终选择在index.html中同步读取配置文件的方式。
工程目录如下：
在这里插入图片描述
index.html
在这里插入图片描述
程序部署后直接修改config.json内的配置即可
在这里插入图片描述

Kuririnnn
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
create-react-app 配置
个人笔记
04-09 333
关于环境变量的描述, 在umi环境变量中
封装读取配置文件
12-16
读取配置文件，封装好的方法，直接调用即可！
React读取properties配置文件转化为json对象并使用在url地址中
见贤思齐焉，见不贤内自省
11-10 3209
首先properties配置文件的格式是： url=http://192.168.0.6 port=8081 我这里命名是strings.properties，因为要做到可配置，就是后期只是改变这个文件的url和port而不用重新打包前端代码，这个文件我放到了public下面 然后每个接口请求其实都需要拿到这个文件里面的配置包括url和port； 所以选择读取文件，读取文件是异步操作所以在封装请求方法的时候，出现了问题，可以打印出来读取的内容，但是暴露出去的对象是一个undefined； 首先，先读取到
create-react-app创建的项目如何修改webpack配置
最新发布
luxigaola的博客
05-13 930
craco是 “Create React App Configuration Override” 的缩写，它是一个用于扩展和覆盖 Create React App（CRA）默认配置的工具。Create React App 是 Facebook 提供的一个流行的脚手架工具，用于快速初始化和构建React Web应用程序，特点是开箱即用并且有一套固定的配置集。
react 读路由 组件配置
jonathan_joestar的博客
08-18 268
react 读路由 组件配置。
create-react-app 自定义配置文件
黄彪博客
09-23 2058
文章目录文章参考暴露配置文件修改端口号eslintConfig 配置关闭eslint静态资源配置请求代理proxy2.x以上的版本，package.json只能添加字符串 文章参考 create-react-app搭建react项目 暴露配置文件 在工程中执行 npm run eject 删除node_modules文件夹的内容 重新安装依赖，执行npm install 修改端口号 e...
react-keeper-app::memo:使用create-react-app制作的笔记应用
05-22
react-keeper-app 该项目是我在Keeper App项目上的工作 :check_mark: 进度清单 第一部分 第二部分 第三部分 第四部分 :building_construction: 建于HTML CSS Java脚本Nodejs的React（create-react-app） :magnifying...
euedge-test-app-react
05-14
在React应用中，它会运行一个热重载的本地开发服务器，如`create-react-app`生成的项目默认配置的`webpack-dev-server`。当开发者修改代码后，服务器会自动重新编译并刷新页面，提高了开发效率。 这个名为 "euedge-...
app-react-crud
03-26
10. 开发工具和配置：项目可能使用Webpack或Create React App等工具进行构建配置，以及ESLint和Prettier进行代码规范和格式化。 总的来说，"app-react-crud"项目展示了React如何与JavaScript结合，构建一个功能完备...
react-notes-app：内罗毕大学资源的React动力平台
02-19
1. **初始化项目**：使用`create-react-app`工具快速搭建React应用的基础结构。 2. **定义组件**：根据应用需求，定义如登录、搜索、上传和贡献等组件。 3. **状态管理**：React中的状态管理和生命周期方法用于控制...
Node-React-Crud-App:这是 nodejs+react+express+mysql CRUD 项目
05-30
通常，这个目录会包括`package.json`（定义项目依赖和脚本）、`server.js`（Express应用入口文件）、`client`子目录（React应用的源码）、`database`配置文件（MySQL连接设置）等。 总的来说，这个项目提供了一个...
webpack打包 react 项目读取外部配置文件，灵活配置域名 ,动态配置域名
linzi19900517的博客
02-20 5735
react 项目读取外部配置文件
create-react-app相关配置
logandroid的博客
05-24 268
1 修改端口关闭自动打开浏览器 2 增加less配置 1、npminstalllessless-loader--save安装less相关依赖模块 2、运行npm run eject将webpack的配置暴露出来 3、修改webpack.config.js的webpack配置文件 增加less匹配 const lessRegex =/\.less$/; // 新增less配置 const lessModuleRegex =/\.module\.less$/; // 新增les...
react学习 - 自定义脚手架配置
累了就歇一会
05-27 2547
自定义create-react-app配置 上一篇博客: react学习 - 使用react脚手架 中讲了如何安装一个react scaffolding, 这篇主要讲, 如何自定义配置来帮助我们更好的进行开发. 在整个项目中, 只在根目录发现了package.json这个文件, 并没有发现 webpack.json或者类似的配置文件, 难道这个脚手架不是用webpack打包的么? 查看pac...
reac-获取自定义data-属性
1234567~~
03-31 2598
在react中可以使用data-attributes传递参数。 而获取参数看到网上大多数都是用e.target.getAttribute('data-add')来获取，这样是可行的。 但其实react提供了获取自定义data属性的方法： e.target.dataset.add。官方文档。看下面代码： home.js class Home extends Component { getD...
React开发总结篇---配置文件请求
layxing27的博客
04-29 618
问题：项目的请求地址，存于电脑（服务器）的系统环境变量中，项目启动的时候，使用电脑中的请求地址？ 答：修改项目的配置文件 项目描述 （1）项目已经开发完成，要求动态获取环境变量中的请求地址 （2）使用git管理仓库 （3）没有执行过命令eject（注意此操作不可逆） 1 操作 1.1 刷新代码 $ git add . git commit -m "运行eject" 2.1 执行eject操作 yarn run eject 将会多出两个文件夹（配置文件） 1.3 删除node_modules.
05_创建React的配置文件
PrototypeOne的博客
05-11 1113
脚手架创建的React项目添加webpack.config.js 添加config文件 create-react-app生成项目后,默认的项目目录是这样的: ![在这里插入图片描述](https://img-blog.csdnimg.cn/386fd4adad374590ac17166b80be797c.png#pic 没有配置文件的目录,脚手架工具给我们提供的生成配置文件的命令在package.json中,如下： 在我们需要配置文件的时候,只需要运行这行脚本就可以了： # 使用npm npm run e
【react】创建react项目与文件配置
Assassin108的博客
05-17 582
进行对axios进行封装，建立服务器与页面的连接进行数据交互。创建页面的路由及对路由的配置，以及其他操作。放置静态资源img、icon等其他资源。仓库，保存数据对数据进行共享操作。按照选项，选择需要创建的项目。用于放置引入页面的各个组件。放置需要展示或者跳转的页面。
webpack下的react配置文件（热替换）
WEB_YH的博客
02-14 1009
webpack_dev_onfig.js配置文件const webpack = require('webpack'); const path = require("path"); const UglifyJSPlugin = require("uglifyjs-webpack-plugin"); const entry = "../app.js"; const outPutPath = "../p...
create-react-app项目打包配置
10-25
create-react-app是一个零配置的React项目脚手架，它默认使用Webpack进行打包。如果需要对打包进行配置，可以使用eject命令将默认配置暴露出来，然后进行修改。但是，使用eject命令后将无法回退到默认配置，因此在...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值