提问人：Chris 提问时间：4/20/2023 更新时间：8/2/2023 访问量：442
Vite 在浏览器中未更改的 .env 变量
.env variables with Vite not changing in the browser
问：
我有一个 React 应用程序，我已经从 CRA 迁移到 Vite 进行捆绑/服务。由于我在其他项目中重用了与后端通信的 API 包装器，因此我将其设置为通过 npm 分发的库。后端 URL 应该可以使用库从前端进行配置，因此使用 CRA 时，我从 .env 文件定义了它，并使用 .现在使用 Vite，我正在尝试实现同样的事情，因此在我的库（与 rollup 捆绑在一起）中，我让库使用者通过读取“import.meta.env.VITE_”来设置后端 URL，在消费 React 应用程序中，该 URL 存储在 .env 文件中。process.env.REACT_APP*
原则上，这是有效的，但有时似乎 env 变量被缓存在某个地方，因为我在 .env 文件中对它们的更改并不总是反映在“npm start”提供的版本中，并且在浏览器之间不一致：Firefox 使用过时的 env 值几个小时，然后它突然起作用了，现在 Chromium 的行为同样奇怪， 虽然Firefox现在正在工作。重新启动开发服务器和我的 PC （！） 似乎都不起作用。我完全不知道为什么会发生这种情况，以及为什么它会在重新启动的不同时间在不同的浏览器中任意发生。
答：
0赞
Chris
4/20/2023
#1
好的，所以我找到了一种看似解决这个问题的方法：核弹并重新安装项目似乎可以摆脱这个问题。/node_modules
评论
0赞
Peter Mugendi
11/15/2023
这行不通
0赞
Tamir Gilany
7/31/2023
#2
更新 #2 *****
所以显然，似乎 process.env 在构建后有变量，所以我最终检查了它是否是 PROD 使用 ，如果它不是我使用的 PRODprocess.env.VARIABLE_NAMEwindow.process.env.VARIABLE_NAME
更新 #1 *****
似乎它仅在运行 localhost 时才有效。仍在检查为什么它在构建后不起作用。当我设法解决它时，会更新你。
对于仍然面临此问题的任何人来说，我设法通过在内部安装和导入它来解决它vite-plugin.environmentvite.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_NAMEwindow.process.env.VARIABLE_NAME
它似乎正在工作，这要归功于 ，它也注入了内部。EnvironmentPluginprocess.envwindow
评论