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

最新推荐文章于 2025-06-04 07:23:59 发布
原创 最新推荐文章于 2025-06-04 07:23:59 发布 · 711 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#react.js

本文介绍了一种将业务配置从代码中分离的方法，通过在index.html中同步读取config.json文件来实现线上配置的灵活修改。

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

Kuririnnn
关注
React读取properties配置文件转化为json对象并使用在url地址中
见贤思齐焉，见不贤内自省
11-10 3417
首先properties配置文件的格式是： url=http://192.168.0.6 port=8081 我这里命名是strings.properties，因为要做到可配置，就是后期只是改变这个文件的url和port而不用重新打包前端代码，这个文件我放到了public下面 然后每个接口请求其实都需要拿到这个文件里面的配置包括url和port； 所以选择读取文件，读取文件是异步操作所以在封装请求方法的时候，出现了问题，可以打印出来读取的内容，但是暴露出去的对象是一个undefined； 首先，先读取到
Ant Desing Pro config文件浅析
TomReact的博客
04-10 495
文章摘要文章摘要文章摘要
封装读取配置文件
12-16
读取配置文件，封装好的方法，直接调用即可！
webpack打包 react 项目读取外部配置文件，灵活配置域名 ,动态配置域名
非科班Java出身GISer的博客
02-20 6045
react 项目读取外部配置文件
react 读路由 组件配置
jonathan_joestar的博客
08-18 380
react 读路由 组件配置。
npm run eject后的create-react-app项目自定义eslint配置方式
winne雪
05-10 1152
前言： 当我们需要对create-react-app项目的配置进行高度修改的时候，我们需要npm run eject，把配置文件都暴露出来。 这时候如果我们想要在项目中配置自定义eslint，可以参照以下步骤进行。 一、首先检查是否安装了 eslint和babel-eslint 查看package.json文件，一般npm run eject之后都会看到已经安装了。 如果尚未安装，则需要安装。 全局安装： npm install eslint babel-eslint -g 当前项目安装（推荐）： npm
【高频考点精讲】前端脚手架开发指南，如何打造自己的create-react-app？
最新发布
全栈老李的博客
06-04 1006
🧑‍🏫：全栈老李📅：2025 年 5 月🧑‍💻：前端初学者、进阶开发者🚀：本文由全栈老李原创，转载请注明出处。最近在后台收到不少同学提问："老李啊，现在各种脚手架用起来是方便，但总感觉黑盒操作心里没底，能不能教我们从头撸一个？" 这不，今天咱们就来手把手实现一个极简版create-react-app，让你彻底搞懂脚手架背后的魔法。（全栈老李出品，盗版必究）
create-react-app的dev环境跨域请求代理转发-环境变量配置
07-28 1164
create-react-app 请求代理 请求转发 环境变量控制 根据不同环境区分变量
记录一次create-react-app框架优化--动态改变配置文件
李小小的博客
04-16 585
前言： 在前端负责应用开发的日常中，会经常性变更项目访问地址以及请求地址，那么如果每一次都去手动更改会显得代码不够智能化，那么基于以上的需求呢，自研了一套 react 开发动态变更项目配置，不多说 直接看代码，本文最后会贴出 git 地址； 效果说明： 当执行 yarn start dev 时 那么就启动 开发环境 的配置； 当执行 yarn build test 时 那么就打包 测试环境 ...
使用create-react-app打造多页面应用
iwowen的博客
12-14 4223
通过create-react-app创建的工程默认都是单页面的，而有时开发项目不得不使用多页面方式开发，本文将介绍如何将create-react-app创建的模板项目修改为多页面的开发方式。 使用工具版本 nodejs --> v8.16.1 npm --> 6.11.3 yarn --> 1.19.1 create-react-app --> 3.3.0 初始化项目 c...
create-react-app 自定义配置文件
黄彪博客
09-23 2297
文章目录文章参考暴露配置文件修改端口号eslintConfig 配置关闭eslint静态资源配置请求代理proxy2.x以上的版本，package.json只能添加字符串 文章参考 create-react-app搭建react项目 暴露配置文件 在工程中执行 npm run eject 删除node_modules文件夹的内容 重新安装依赖，执行npm install 修改端口号 e...
create-react-app 配置
个人笔记
04-09 419
关于环境变量的描述, 在umi环境变量中
create-react-app相关配置
logandroid的博客
05-24 330
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 2742
自定义create-react-app配置 上一篇博客: react学习 - 使用react脚手架 中讲了如何安装一个react scaffolding, 这篇主要讲, 如何自定义配置来帮助我们更好的进行开发. 在整个项目中, 只在根目录发现了package.json这个文件, 并没有发现 webpack.json或者类似的配置文件, 难道这个脚手架不是用webpack打包的么? 查看pac...
reac-获取自定义data-属性
1234567~~
03-31 2908
在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 733
问题：项目的请求地址，存于电脑（服务器）的系统环境变量中，项目启动的时候，使用电脑中的请求地址？ 答：修改项目的配置文件 项目描述 （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 1226
脚手架创建的React项目添加webpack.config.js 添加config文件 create-react-app生成项目后,默认的项目目录是这样的: ![在这里插入图片描述](https://img-blog.csdnimg.cn/386fd4adad374590ac17166b80be797c.png#pic 没有配置文件的目录,脚手架工具给我们提供的生成配置文件的命令在package.json中,如下： 在我们需要配置文件的时候,只需要运行这行脚本就可以了： # 使用npm npm run e
一个react前端项目中的配置文件作用解析
沉默的游鱼
10-16 947
npm 提供了一个庞大的包仓库，开发者可以在其中找到各种各样的 JavaScript 包，包括 Webpack、React、TypeScript 等。UMI 是一个基于 React 的前端框架，它使用 React 作为底层 UI 库，同时提供了一套完整的前端开发解决方案，包括路由、插件、构建、部署等。在这个文件中，开发者可以指定编译器的选项、编译输出目录、需要编译的文件和目录等信息。文件中，开发者可以指定项目的依赖项、脚本、配置等信息，以及指定项目的入口文件、作者、许可证等元数据信息。
【react】创建react项目与文件配置
Assassin108的博客
05-17 732
进行对axios进行封装，建立服务器与页面的连接进行数据交互。创建页面的路由及对路由的配置，以及其他操作。放置静态资源img、icon等其他资源。仓库，保存数据对数据进行共享操作。按照选项，选择需要创建的项目。用于放置引入页面的各个组件。放置需要展示或者跳转的页面。
使用create-nw-react-app快速构建无配置NW.js React应用
例如，一个使用create-nw-react-app构建的应用不仅可以展示动态UI，还可以读取本地文件、生成PDF报告、控制外部设备或与其他本地程序通信，极大地扩展了前端技术的应用边界。 在项目结构方面，由于create-nw-react-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值