首页 文章

如何在React Webpack应用程序中为不同的环境参数化变量？

提问于
浏览 次
3

我正在开发一个由 create-react-app 创建的React Web应用程序，我正准备部署它 .

问题是，对于开发，应用程序使用在我的开发环境（localhost：）上运行的api实例，但对于已部署的应用程序，这应该指向服务器api实例（api.myapp.com） .

目前主机只是我网络组件中的一个变量：

const hostname = 'localhost:9876'

我打算使用webpack来生成将由 生产环境 前端提供的静态文件，我想继续使用 npm start 设置的 npm start 进行开发 .

设置项目的正确方法是什么，以便根据我是运行开发服务器还是构建 生产环境 来自动将主机设置为正确的值？

reactjs webpack create-react-app

3 回答

  • 0

    一个常见的解决方案是检查 process.env.NODE_ENV ，如下所示：

    const hostname = process.env.NODE_ENV === "development" ? "localhost:9876" : "localhost:6789";

    您可能需要使用 DefinePlugin 强制环境变量出现在Webpack配置文件中，如下所示：

    plugins: [
  new webpack.DefinePlugin({
    "process.env": {
      NODE_ENV:JSON.stringify(process.env.NODE_ENV || "development")
    }
  })
]

    另一种解决方案可能是使用config包并提供主机名字符串作为配置参数 . config将根据当前NODE_ENV从文件继承配置 . 它将从default.json文件中使用配置开始，然后使用development.json或production.json覆盖它，具体取决于您的环境 .

    请注意，您需要使用CopyWebpackPlugin将配置文件复制到输出目录才能生效 .

    回复于
  • 2

    肯定有很多方法可以实现这一目标 . 其中一个解决方案是使用webpacks的 DefinePlugin . 在webpack配置的插件部分中，您将添加如下内容：

    new webpack.DefinePlugin({
  API_HOST: process.env.NODE_ENV === 'production'
    ? JSON.stringify('localhost:8080')
    : JSON.stringify('api.com')
}),

    这会在您的代码库中的任何位置创建一个全局变量 API_HOST ，您可以使用它 . 你可以在这里阅读更多关于 DefinePlugin 的信息https://webpack.js.org/plugins/define-plugin/

    回复于
  • 0

    当您向api服务器发出任何请求而不是为您的应用调用完整网址时，您可以使用相对路径 .

    对于您的开发，您可以向package.json文件添加代理属性：

    {
...
"proxy": {
  "/api/*": {
      "target" :"http://localhost:9876"
  }
 }
}

    因此，每当你提出任何以 /api 为前缀的请求将被重定向到 http://localhost:9876/api 时，这只是在开发中，但在 生产环境 中，如果你发出一个前缀为 /api 的请求，它将不被重定向，它将被正常提供，因为代理只是可用在 create-react-app 的开发服务器中 .

    回复于

相关问题