reactjs Vite的.env变量不会在浏览器中更改

6tqwzwtp  于 2023-08-04  发布在  React
关注(0)|答案(2)|浏览(97)

我有一个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(!)似乎在起作用。我完全不知道为什么会发生这种情况,为什么它会在不同的浏览器中在不同的时间重新启动。

jq6vz3qz

jq6vz3qz1#

好吧,我找到了一个似乎可以解决这个问题的方法:nuking /node_modules和重新安装项目似乎可以摆脱这一点。

8xiog9wr

8xiog9wr2#

  • 更新#2 *

显然,在构建后process.env似乎有变量,所以我最后检查它是否是PROD来使用process.env.VARIABLE_NAME,如果不是PROD,我就使用window.process.env.VARIABLE_NAME

*更新#1

似乎只有在运行localhost时才有效。仍然在检查为什么它在构建后不起作用。我会更新你当我设法解决它。
对于仍然面临这个问题的人,我通过安装vite-plugin.environment并将其导入vite.config来解决它

import EnvironmentPlugin from 'vite-plugin-environment';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), EnvironmentPlugin('all', { prefix: 'VITE_' })],

  // ... rest of your configuration
})

字符串
然后,在使用rollup构建的已使用包中,我将process.env.VARIABLE_NAME更改为window.process.env.VARIABLE_NAME
它看起来像是在工作,这要归功于EnvironmentPlugin,它也将process.env注入到window中。

相关问题