在react项目中做公共配置文件

在我们的react项目中有public文件夹,这个地方存放都是静态文件不会被编译,所以我们的静态公共配置文件就放在这里

  • 公共配置文件放在这里有一个好处就是任何人可以实时修改配置文件,然后程序会根据你的修改运行对应的逻辑或者变量,如:
    我们的开发人员做了这个配置文件功能,我们就可以告诉其他非研发同事在这里配置所需内容,是不是很方便?下面来看一下

1.在public中创建config.js

window.config = {
	baseUrl: 'xxxxx',
	mainTitle: 'xxxx',
	imgUrl: 'xxxx',
	...
}

2.在index.html中添加

  • 注意这里的%PUBLIC_URL%是工程内置的写法,我们创建工程的时候在index.html可以看到很多这样的写法,意思就是路径取public文件
  • 而且我建议大家使用script引入,这样每次刷新页面的时候能保证获取到我们修改config.js后的内容,如果使用import的话,会在编译的时候直接打包进去,导致打完包再修改配置文件就无效了

<script src = "%PUBLIC_URL%/config.js"></script>

3.在入口src -> index.js文件中

// 大家应该很熟悉,就是将功能配置文件的内容挂载到全局,这个跟vue的写法大同小异
React.Component.prototype.$config = window.config

4.在组件中使用,比如我们在公共配置文件中添加了图片地址,这样用:
process.env.PUBLIC_URL

let imgUrl = this.$config.imgUrl
<img  src={`${process.env.PUBLIC_URL}/${imgUrl}`}></ img>
  • 在上面我们看到了process.env,他是Nodejs提供的一个API,它返回一个包含用户环境信息的对象。如果我们给Nodejs
    设置一个环境变量,并把它挂载在 process.env 返回的对象上,便可以在代码中进行相应的环境判断
// 如我们有时会看到这样的代码,就是判断当前是生产还是开发环境来决定mode字段的定义
module.exports = {
  mode: process.env.NODE_ENV === 'production' ? 'production' : 'development'
}
  • 2
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 6
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值