Question

我在create-react-app中使用以下环境变量：

console.log(process.env.REACT_APP_API_URL) // http://localhost:5555

当我通过阅读npm start文件运行.env时，它可以正常运行：

REACT_APP_API_URL=http://localhost:5555

如何在执行http://localhost:1234时设置npm run build之类的其他值？

这是我的package.json文件：

{
  "name": "webapp",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "react-scripts": "0.9.0"
  },
  "dependencies": {
    "react": "^15.4.2",
    "react-dom": "^15.4.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

Answer 1

我想你现在已经有了这个工作，但是对于其他找到这个的人，你可以在你的＆＃34; create-react-app＆＃34的根目录下的.env文件中设置你的默认环境变量。 ;项目

要分离使用npm start和npm run build时使用的变量，您可以创建另外两个env文件 - .env.development和.env.production。

npm start会将REACT_APP_NODE_ENV设置为development，因此它会自动使用.env.development文件，npm run build将REACT_APP_NODE_ENV设置为production {1}}，因此会自动使用.env.production。在这些值中设置的值将覆盖.env。

中的值

如果您正在与其他人合作，并且只拥有特定于您的计算机的值，则可以通过将这些值添加到新文件来覆盖.env.development和.env.production中的值 - {{分别为1}}和.env.development.local。

编辑：我应该指出您设置的环境变量必须以＆＃34; REACT_APP _＆＃34;开头，例如。＆＃34; REACT_APP_MY_ENV_VALUE＆＃34;

编辑2：如果您需要的不仅仅是开发和制作，请使用env-cmd指定的this comment。

Answer 2

您可以像public class MainActivity extends AppCompatActivity implements ListAdapter.Listener { private static final String TAG = "MainActivity"; RecyclerView recyclerView; DbHelper dbHelper; ListAdapter adapter; FloatingActionButton fab; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); introItem(); dbHelper = DbHelper.getInstance(getApplicationContext()); recyclerView= (RecyclerView) findViewById(R.id.rv_contactlist); adapter = new ListAdapter(this, dbHelper.getAllUser()); recyclerView.setAdapter(adapter); recyclerView.setLayoutManager(new LinearLayoutManager(this)); ItemTouchHelper.Callback callback = new SimpleItemTouchHelperCallback(adapter); ItemTouchHelper touchHelper = new ItemTouchHelper(callback); touchHelper.attachToRecyclerView(recyclerView); totalQuantity(); adapter.notifyDataSetChanged(); fabHideShow(); versionCheckMethod(); }那样使用：

process.env.NODE_ENV

您需要设置const apiUrl = process.env.NODE_ENV === 'production' ? process.env.REACT_APP_PROD_API_URL : process.env.REACT_APP_DEV_API_URL;和REACT_APP_PROD_API_URL。

或者，如果生产URL始终相同，您可以简化它：

REACT_APP_DEV_API_URL

创建React App会在构建时为您设置const apiUrl = process.env.NODE_ENV === 'production' ? 'https://example.com' : process.env.REACT_APP_DEV_API_URL;为'production'，因此您无需担心何时将其设置为生产。

注意：您必须重新启动服务器（例如，再次运行NODE_ENV）以检测环境变量更改。

Answer 3

此外，它可以在没有额外依赖的情况下完成：

"scripts": {
  "build": "sh -ac '. ./.env.${REACT_APP_ENV}; react-scripts build'",
  "build:staging": "REACT_APP_ENV=staging npm run build",
  "build:production": "REACT_APP_ENV=production npm run build"
},

并相应地有 .env.staging, .env.production 个文件

Answer 4

如果您想使用单独的dotenv文件来构建和/或部署到单独的环境（阶段，产品），则可以像这样使用env-cmd：

npm install --save-dev env-cmd
./node_modules/.bin/env-cmd -f ./stage.env npm build

然后只需相应地更新您的package.json：

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "build:stage": "env-cmd -f ./.env.stage npm run-script build"
  },

然后要构建，只需运行以下shell命令：

npm run build:stage

Answer 5

安装“ env-cmd”软件包

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "deploy": "gh-pages -d build",
    "start:qa": "env-cmd -f .env.qa react-scripts start",
    "build:qa": "env-cmd -f .env.qa react-scripts build"
  },

如果要在QA环境中运行，请在本地

npm运行开始：质量检查

如何在运行create-react-app构建脚本时设置构建.env变量？

5 个答案: