在react项目中做公共配置文件_process.env.public_url

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

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

1.在public中创建config.js

window.config = {
	baseUrl: 'xxxxx',
	mainTitle: 'xxxx',
	imgUrl: 'xxxx',
	...
}
1
2
3
4
5
6

2.在index.html中添加

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

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

1
2
3

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

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

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

let imgUrl = this.$config.imgUrl
<img  src={`${process.env.PUBLIC_URL}/${imgUrl}`}></ img>
1
2

• 在上面我们看到了process.env，他是Nodejs提供的一个API，它返回一个包含用户环境信息的对象。如果我们给Nodejs
  设置一个环境变量，并把它挂载在 process.env 返回的对象上，便可以在代码中进行相应的环境判断

// 如我们有时会看到这样的代码，就是判断当前是生产还是开发环境来决定mode字段的定义
module.exports = {
  mode: process.env.NODE_ENV === 'production' ? 'production' : 'development'
}
1
2
3
4