我正在用vite构建一个react应用程序，它使用@react-oauth/google，需要我写我的clientId。我是通过clientId={process.env.MY_CLIENT_ID}做的，这会导致我的应用程序出现错误“process is not defined”。
我仔细研究了一下vite的.env文档，发现它们有自己的方式来处理process.env到import.meta.env，或者至少我知道这两个是等价的;这里是文档link如果想再看看.在我将我的clientId更改为import.meta.env.MY_CLIENT_ID之后，浏览器能够再次呈现我的应用程序，但现在我收到了另一个错误。

m=credential_button_library:45 [GSI_LOGGER]: The given client ID is not found.

字符串
credential_button_library是<GoogleOAuthProvider></GoogleOAuthProvider>，而@react-oauth/google dependency需要clientId=''作为属性。
注意到当我只是简单地将我的客户端ID的值粘贴到clientId时，代码工作正常，我控制台记录了import.meta.env.MY_CLIENT_ID的值并得到'undefined'，而不是存储在我的.env MY_CLIENT_ID = somerandomcode中的值（如果错误位于.env文件中，请查看它的内部）。我再次查看Vite文档，发现可能的原因是我的变量没有以VITE_开头，所以我将其名称更改为VITE_MY_CLIENT_ID= somerandomcode，但这并没有解决它。

• 更新 * 在@adsy的建议下，我尝试使用此blog更改vite配置。这是我的新配置看起来像：

import { defineConfig, loadEnv } from 'vite';

export default defineConfig(({ command, mode }) => {
    const env = loadEnv(mode, process.cwd(), '');
    return {
        define: {
            'process.env.VITE_MY_CLIENT_ID': JSON.stringify(env.VITE_MY_CLIENT_ID),
        },
    };
});

型
虽然这允许我使用process.env而不会出现我在文章顶部描述的错误，但console.log（process.env.VITE_MY_CLIENT_ID）的输出仍然未定义。

• 更新 *

我解决了这个问题。问题是我没有把.env文件放在正确的位置;）.