这是一个创建于 580 天前的主题，其中的信息可能已经有所发展或是发生改变。
是这样的，一个站点可能部署到不同环境，使用不同域名来访问，然后有一些环境相关的配置项。
当前方案是：为每个环境单独做静态配置，打包进代码里。
当前问题是：环境太多了，而且在不断增加，每次都要改代码很费劲。
解决方法：因为每个环境都有独立的后端，那么自然可以通过 api 来获取这些配置。
新方案遇到的问题：
由于这个配置散落在非常多的地方引用，比如各种组件代码里 config.env === "xx" ? <a/> : <b/>，甚至比如一些 http 请求的初始化。
改起来非常的费劲，原来是个静态的直接用就行了，如果要变成请求，那就变成异步的了，就会掉进异步的地狱里，要改几百个地方。
所以请问怎么搞合理？
当前方案是：为每个环境单独做静态配置，打包进代码里。
当前问题是：环境太多了，而且在不断增加，每次都要改代码很费劲。
解决方法：因为每个环境都有独立的后端，那么自然可以通过 api 来获取这些配置。
新方案遇到的问题：
由于这个配置散落在非常多的地方引用，比如各种组件代码里 config.env === "xx" ? <a/> : <b/>，甚至比如一些 http 请求的初始化。
改起来非常的费劲，原来是个静态的直接用就行了，如果要变成请求，那就变成异步的了，就会掉进异步的地狱里，要改几百个地方。
所以请问怎么搞合理？
 |
1
vace 2023-04-27 12:54:17 +08:00
不想改代码的话，就同步获取 env ，直接赋值给 config：1. 后端输出 html ，把 env 直接注入到页面，直接全局变量拿，2. 提供一个 jsonp 的接口，或者直接输出一段 js ，在渲染前直接 script 加载，然后同 1 。
异步的方案非常多了，看你代码架构了，但既然有很多散落的引用，那说明原来的东西也不咋合理，你要做的就是确保在异步完成后取值。 |
 |
3
ixixi 2023-04-27 13:29:56 +08:00
我们是后端渲染输出 html 一段 全局变量 简单的 base64 加密一下
|
 |
4
ZoeeoZ 2023-04-27 14:14:44 +08:00
试试看能不能抽出来放到顶层判断,然后传递给组件?
比如在动态路由加载过程中去判断,判断完成之后直接返回需要显示的信息,子组件固定渲染信息就行了,如果还需要改动就只在顶层修改就可以 |
 |
5
rrfeng OP @ZoeeoZ
抽不动，下面太多直接引用了，如果开始渲染时还没有准备好，页面就直接炸了。 本来找到个办法，在 react.render 之前 fetch 一下。 但是结果各种组件的 import 里就有很多直接执行的代码依赖…… 最后的解决办法： 在最开始执行下 fetch ，然后放到 localstorage 里，然后刷新下页面。 如果一开始 localstorage 就有，那就不 fetch 。 |
 |
6
JavenXiao 2023-04-27 21:02:39 +08:00
每个环境弄个 js 文件，里面写个立即执行函数把配置挂在 window 上，让后把这个 js 文件地址直接放在 html 模板的 script 标签上，打开页面时会阻塞执行，react 开始执行的时候 window 上的变量已经挂好了，可以直接取
|
Select Language