最后更新于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);
}
}
试过了,问题在于fetch是异步的,用起来嘿,那叫一个恶心。
方法四:
创建config.js到public目录下,在index.html目录中调用。参见
看作者是个印度小姐姐,说的信誓旦旦的,长得又好看,相信她吧。下面的回复说这样会造成安全隐患?
在react项目中做公共配置文件,这里说的更详细,而且是中文的,但是这篇文章里面的第四步我没有做,做完前三步就可以用window.config.XXX
调到变量了。