On the issue of create-react-app packaging online

  javascript

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

For example:
Address of development request: 192.168.1.100:3000/login
Address of production request: 192.168.1.200:3000/login

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 'http://192.168.1.100:3000';
 }else if(ENV === 'production'){
 return 'http://192.168.1.200:3000';
 bracket
 bracket
 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": "http://192.168.1.100:3000"

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/'
 },

Js

Axios and config are introduced.

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