On the issue of create-react-app packaging online


My problem is that the api prefixes requested by the development environment and the production environment are different.

For example:
Address of development request:
Address of production request:

Then there is a need for a way to distinguish the address prefixes used in different environments. I saw two ways online.

1。 Set the baseURL for axios according to the process.env.NODE_ENV variable.

const getBaseUrl = () => {
 const ENV = process.env.NODE_ENV;
 if(ENV === 'development'){
 return '';
 }else if(ENV === 'production'){
 return '';
 const instance = axios.create({
 baseURL: getBaseUrl(),
 timeout: 10000

2。 Give axios’ baseURL Hard coding directly as the address of the online environment, and then the development environment proxy to the test server

"proxy": ""

I’d like to ask you how you handled the project.

Js to write:

baseUrl: {
 dev: 'http://xxxxxx/api/v1/',
 pro: 'https://xxxxx/api/v1/'


Axios and config are introduced.

axios.baseUrl = process.env.NODE_ENV === 'development' ?   config.baseUrl.dev : config.baseUrl.pro;