Question

我有一个react组件，该组件在开发中将重定向到localhost URL，但在生产中将重定向到其他URL。在我的后端，我遇到了同样的情况，在那里我用名为dotenv的软件包解决了它。我想知道有人会如何在前端做出反应。

export default withRouter(function Login(props) {

    useEffect(() => {
        if(localStorage.getItem('jwt')){
            props.history.push('/dashboard');
        }
    })

    const handleLogin = () => {
        window.location.href = "http://localhost:8000/auth/google";
    }

    return (
        <LoginView handleLogin={handleLogin}/>
    )
})

Answer 1

您也可以使用dotenv添加环境变量来做出反应。在应用程序部署期间（在构建过程中），必须用相应的URL替换环境变量（因为这是前端应用程序中最常遇到的用例）。这可以在配置构建过程时完成。

以下是使用Webpack https://medium.com/@trekinbami/using-environment-variables-in-react-6b0a99d83cf5的示例

这里的整个想法是创建一个文件（称为.env），其中包含您的环境变量。为了防止人们发现您的本地数据库密码与您每一次使用的密码相同 Internet上您的帐户中，我敦促您将.env文件添加到您的.gitignore。您的前端代码将引用相同的两个环境上的环境变量（process.env.API_URL）（开发/生产），但是因为您在中定义了不同的值您的.env文件，编译后的值将有所不同。

我建议为react应用创建一个单独的.env文件，因为不应意外地将其提供给网站。

Create React App具有一个模块（围绕节点dotenv模块构建），可用于添加自定义环境变量

https://create-react-app.dev/docs/adding-custom-environment-variables/

环境变量是在构建期间嵌入的。以来 Create React App会生成静态HTML / CSS / JS捆绑包，但不能可能在运行时阅读它们。要在运行时阅读它们，您需要将HTML加载到服务器上的内存中并替换其中的占位符运行时，如此处所述。或者，您可以在随时更改服务器。

Answer 2

这取决于您使用反应的方式。

如果您使用的是react-script，则可以转到解决方案（https://create-react-app.dev/docs/adding-custom-environment-variables/）上方。

但是，如果您使用的是webpack，请尝试使用DotenvPlugin代替dotenv模块（https://webpack.js.org/plugins/environment-plugin/）。

我认为，请不要在媒体链接中遵循方法1的用法，因为不应在git上推送env，但需要完成package.json。

环境变量起反应

2 个答案: