如何将域 url 保存在单个文件中并在不同的组件中重复使用？

Question

所以，我有一个域 url，我将它与不同的路径一起使用，以向 api 发出不同的请求。例如 "api.example-url.com"，我将它与不同的路径一起使用，例如 "api.example-url.com/path1" 和 "api.example-url.com/path2"，所以我想将域 url 保存在一个文件中，然后将其导入不同的文件组件，因此我可以将它与不同的路径一起使用，并且只要域发生变化，我就可以简单地更改该文件中的域。这在 reactjs 中可能吗？

Answer 1

为此使用环境变量。您可以使用 webpack 插件 DefinePlugin 或 EnvironmentPlugin 访问 process.env。这是文档 (https://webpack.js.org/plugins/environment-plugin/)。

假设您的环境变量名称是 'ROOT_URL' 那么您可以像下面这样创建 url

url = '${process.env.ROOT_URL}/YOUR_PATH'

UPDATE

如果您使用的是 create-react-app。您可以设置以 REACT_APP_[YOUR_VARIABLE] 开头的环境变量名称。在您的情况下，变量名称将是 REACT_APP_ROOT_URL 并且 url 也会相应地更改。

Answer 2

有多种方法可以做到这一点，一种是使用

进行配置

webpack

像这样

    plugins: [
     new webpack.DefinePlugin({
     BASE_URL: (typeof process.env.BASE_URL !== 'undefined') ? 
      process.env.BASE_URL : 'http://localhost:3000'
     })
    ],

您可以在您的 webpack 配置中定义它。所以你可以在代码的任何地方使用。

另外就是定义一个常量，导入这个常量，在代码的任何地方使用。

export const BASE_URL = "http://example.com"

如何将域 url 保存在单个文件中并在不同的组件中重复使用？

How can I save a domain url in a single file and reuse it in different components?

ecmascript-6

reactjs

fetch-api