react代码编译+部署完成，运行前：如何修改配置文件以改变代码中对应变量的值？

最后更新于2022年8月9日 11:23:54：

使用create react app构建项目

方法一：

写在config.json中，直接import。这种方法借用了一个第三方库，具体名字忘记了，问题在于webpack在编译时会把config.json也编译进项目中，运行时根本无法修改。

说人话就是npm run build完了，你配置写的啥样，那就是啥样了。比如说你在config.json里面写的server_ip=123.123.123.123，那他运行起来就这样了，想改只能返回源码里面改好了再编译一遍，那有个屁用啊，还不如直接写代码里。

方法二：

create react app自带motdotla/dotenv库，可以手动在项目根目录下创建一个config.env文件，里头写上你想要的参数，比如REACT_APP_SERVER_IP=123.123.123.123。这样在代码里面用process.env.REACT_APP_SERVER_IP调用即可。

跟方法一差不多，有屁用啊？参见：How to implement runtime environment variables with create-react-app, Docker, and Nginx
It can’t inject environment variables during content serving (like Next.js does). During transpiling, Webpack process replaces all occurrences of process.env with a string value that was given. This means it can only be configured during build time.

方法三：

直接fetch本地的config.json文件，代码如下：

const configFetch = async (path) => {
    try {
        const response = await fetch(path);
        const respJson = await response.json();
        return respJson;
    } catch (e) {
        console.log(e);
    }
}
1
2
3
4
5
6
7
8
9

试过了，问题在于fetch是异步的，用起来嘿，那叫一个恶心。

方法四：

创建config.js到public目录下，在index.html目录中调用。参见

看作者是个印度小姐姐，说的信誓旦旦的，长得又好看，相信她吧。下面的回复说这样会造成安全隐患？

在react项目中做公共配置文件，这里说的更详细，而且是中文的，但是这篇文章里面的第四步我没有做，做完前三步就可以用window.config.XXX调到变量了。