如何在构建时以不同方式构建开发环境和生产环境？等）数据库配置

Question

我正在使用 create-react-app，我应该分别设置项目生产环境、开发环境并部署到开发服务器和生产服务器（分开）

现在，我找不到解决这个问题的好方法，我在部署到服务器（prod 或 dev）之前更改自己的配置值。但它是低效且不稳定。

例如）

//config.json

...
"db": {
    "prodSchema": "foo_p",
    "devSchema": "foo_d",
    "username": "dany",
    "password": "****",
    "host": "123.456.789.111:3306",
    "dialect": "mysql"
},
...

并使用

//配置use.js

正在部署、检查和更改...

//db.connect(config.prodSchema)
db.connect(config.devSchema)

我想在 'yarn build' prod env 和 dev env 在 create-react-app

之前得到设置

Answer 1

使用 webpack，您可以应用 environment plugin 并检查环境变量以检查您应该使用哪个配置文件。

browserify 有一个 transformation called envify 用于同样的目的。

那么你可以这样做：

import axios from "axios";

const env = process.env.NODE_ENV || "development";

const config = {
  development: {
    baseURL: "http://127.0.0.1:3000",
  },
  staging: {
    baseURL: "https://mysuperservice.herokuapp.com",
  },
  production: {
    baseURL: "https://mysuperservice.com",
  },
};
const api = axios.create({
  baseURL: config[env].baseURL,
  headers: {
    "x-api-key": "ABC",
  },
});

如何在构建时以不同方式构建开发环境和生产环境？等）数据库配置

How can I build the dev env and the prod env differently in build time? etc) db config

javascript

reactjs

create-react-app