相关疑难解决方法(0)

我一直在尝试在React中加载环境变量，但似乎无法弄清楚。我尝试了多种方法：

使用dotenv-webpack包加载它们

webpack.config.dev.js

const merge = require('webpack-merge');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const template = require('html-webpack-template');
const Dotenv = require('dotenv-webpack');
const baseConfig = require('./webpack.config.base');

module.exports = merge(baseConfig, {
  mode: 'production',
  plugins: [
    new HtmlWebpackPlugin({
      template,
      inject: false,
      appMountId: 'app',
      mobile: true,
      lang: 'es-ES',
      title: 'My App',
      meta: [
        {
          name: 'description',
          content: 'My App',
        },
      ],
    }),
    new Dotenv(),
  ],
});

.env

API_HOST=http://localhost:8000
REACT_APP_API_HOST=http://localhost:8000

将其直接传递给package.json脚本：

"start": "webpack-dev-server --config ./webpack.config.dev.js"

在webpack命令上使用.env

webpack --env.API_HOST=http://localhost:8000

使用 webpack.environmentPlugin

const webpack = …

我是 Web 开发的新手，最近开始将我的简单 Web 应用程序推送到 GitHub 页面。我很快发现我的页面在集成后不会呈现，react-router因为我的开发和产品 URL 链接不同。

我的问题是，如何设置我的package.json和.env以便它能够正确呈现我的 URL？

我的.env文件如下所示：

REACT_APP_PUBLIC_URL="my-site"

我的package.json样子：

"scripts": {
    "start": "NODE_ENV=development react-scripts start",
    "start:prod": "NODE_ENV=production react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  }

在我的内部Index.js，我正在这样做：

if (process.env.NODE_ENV === "production") {
  require("dotenv").load();
}

console.log("PROCESS.ENV.NODE_ENV: ", process.env.NODE_ENV); // This prints "development"
console.log("PROCESS.ENV.PUBLIC_URL: ", process.env.REACT_APP_PUBLIC_URL); // This prints "my-site"

当我运行时npm run …

https://github.com/gothinkster/react-redux-realworld-example-app上的react redux realworld.io应用程序的自述文件说要编辑以src/agent.js将其更改API_ROOT为指向不同的后端api实例.我们想要进行设置,以便API_ROOT可以通过在我们运行生产构建的多个环境(例如,"staging"和"live")中不同的环境变量来定义.

我们按照12factor.net原则在openshift kubernetes上运行容器,其中代码构建一次,然后通过环境进行推广.我们可以使用单个命令启动新环境,因此我们不希望在代码中有一个switch语句来命名每个环境,并且硬编码每个环境的后端API_ROOT.相反,我希望能够使用环境变量在新环境中运行现有生产构建容器映像,将其更改API_ROOT为指向我们要测试的正确后端API.

我查看了许多不同的博客,stackoverflow答案和官方文档.主要问题是典型的解决方案process.env.API_ROOT在构建时"烘焙" 环境变量,否则就会有一个开关,将所有环境的细节硬编码到代码中.这两者都不令人满意,因为我们希望能够在现有容器中获取最新的稳定代码,并使用在那里运行的API在新环境中运行它.

到目前为止,我最接近的是编辑代码以将其呈现process.env.API_ROOT为将<script>其设置在window.API_ROOT变量上的标记.然后检查是否存在其他在为API_ROOT定义const时使用默认值.这感觉非常具有侵略性,有点脆弱,我不清楚在示例应用程序中在哪里提供这样的脚本标记的最佳位置https://github.com/gothinkster/react-redux-realworld-example-app