我有一个React应用程序,我已经从CRA迁移到Vite进行捆绑/服务。由于我在其他项目中重用与后端通信的API Package 器,因此我将其作为一个通过npm分发的库。后端URL应该可以使用库从前端进行配置,因此对于CRA,我从.env文件定义了它,并使用process.env.REACT_APP*
从库中访问它们。现在有了Vite,我试图实现同样的事情,所以在我的库中(与rollup捆绑在一起),我让库消费者通过阅读import.Meta.env.VITE_
来设置后端URL,在消费React应用程序中,它存储在.env文件中。
原则上,这是有效的,但有时似乎env变量被缓存在某个地方,因为我在.env文件中对它们的更改并不总是反映在npm start
提供的版本中,并且在浏览器之间不一致:几个小时以来,Firefox一直使用一个陈旧的env值,然后它突然工作了,现在Chromium的行为也同样奇怪,尽管Firefox现在正在工作。无论是重新启动开发服务器还是我的PC(!)似乎在起作用。我完全不知道为什么会发生这种情况,为什么它会在不同的浏览器中在不同的时间重新启动。
2条答案
按热度按时间jq6vz3qz1#
好吧,我找到了一个似乎可以解决这个问题的方法:nuking
/node_modules
和重新安装项目似乎可以摆脱这一点。8xiog9wr2#
显然,在构建后process.env似乎有变量,所以我最后检查它是否是PROD来使用
process.env.VARIABLE_NAME
,如果不是PROD,我就使用window.process.env.VARIABLE_NAME
*更新#1
似乎只有在运行localhost时才有效。仍然在检查为什么它在构建后不起作用。我会更新你当我设法解决它。
对于仍然面临这个问题的人,我通过安装
vite-plugin.environment
并将其导入vite.config
来解决它字符串
然后,在使用rollup构建的已使用包中,我将
process.env.VARIABLE_NAME
更改为window.process.env.VARIABLE_NAME
。它看起来像是在工作,这要归功于
EnvironmentPlugin
,它也将process.env
注入到window
中。