Question

我有一个反应应用程序，它向一个laravel后端发出api请求。

我的应用程序托管到heroku（我不知道它是否会改变我的问题）

我想区分这些请求的生产环境和本地环境。我喜欢这样：

在我的“welcome.blade.php”中，我添加了这个元标记：

<meta name="app_env" content="<?php echo env("APP_ENV") ?>" />

APP_ENV包含“生产”或“本地”。

在我的反应应用程序中，我有这个脚本：

export let urlApi = (document.querySelector("[name=app_env]").content === "production" ) ?
"https://laravel-react.herokuapp.com/api"
:
"http://localhost/laravel_react/public/api"
;

我在每个需要它的组件中导入这个函数：

import { urlApi } from './../findUrlApi';
// .....
return fetch(`${urlApi}/products`,{
        headers: {
          "Content-Type": "application/json",
          "Authorization": "Bearer "+localStorage.getItem("token")
        }
      })

工作正常。

但我的问题是：这是一个好习惯吗？（我是初学者的反应）

感谢您的反馈。的Merci

多米尼克

Answer 1

我认为这不是一个好习惯。环境变量（例如APP_ENV和API URL）不应驻留在源代码中。

但是，您可以像往常一样将它们存储在Laravel .env文件中，但是可以在密钥前面加上MIX_。例如：MIX_API_URL=http://localhost。 MIX_*文件中的每个.env变量都将向您的React应用程序公开。然后，您可以通过调用MIX_API_URL从React应用程序中获得process.env.MIX_API_URL的值。

更新的Laravel .env文件

...
MIX_APP_ENV=production (or local)   # Should be same as APP_ENV
MIX_API_LOCAL_URL=http://localhost/laravel_react/public/api
MIX_API_PRODUCTION_URL=https://laravel-react.herokuapp.com/api

在需要它的React组件中

const { MIX_APP_ENV, MIX_API_LOCAL_URL, MIX_API_PRODUCTION_URL } = process.env;
const apiUrl = MIX_APP_ENV === 'local'? MIX_API_LOCAL_URL: MIX_API_PRODUCTION_URL;

return fetch(apiUrl + '/products', { ... });

如果无法调用process.env.MIX_API_URL并且您正在运行npm run watch，请尝试重新启动npm run watch并重新加载浏览器。

参考

Laravel Documentation - Compiling Assets (Mix) - Environment Variables

laravel环境变量与反应：这是一个好习惯吗？

1 个答案: