React 不同的环境打包不同的域名

在开发中，常见的现象：生产环境、测试环境、开发环境的域名都不同，怎样去根据不同的环境需求打包不同的域名呢？

方案一：每次打包之前更改 axios.defaults.baseURL

 import axios from 'axios';
import qs from 'qs';

axios.defaults.baseURL = 'http://baidu.com/';
// axios.defaults.baseURL = 'http://jianshu.com/';
// axios.defaults.baseURL = 'http://github.com/';

export function get(url, params,openid) {
  return new Promise((resolve, reject) => {
    axios.get(url, {params: params})
      .then(res => {
        resolve(res.data)
      })
      .catch(err => {
        reject(err)
      })
  })
}

export function post(url, data) {
  return new Promise((resolve, reject) => {
    axios.post(url, qs.stringify(data), {
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
      }
    }).then(res => {
      resolve(res.data)
    }).catch(err => {
      reject(err)
    })
  })
}

方案二：配置相应的build命令

复制一个script文件夹下的build.js文件，更改文件名

1.png

打开文件，更改process.env.NODE_ENV值

2.png

新建一个config文件

3.png

config.js

export const BaseParam ={
    fetchUrl: 
        process.env.NODE_ENV == "development" ? 'http://baidu.com/' :
        process.env.NODE_ENV == "st" ? 'http://jianshu.com/' : 
        process.env.NODE_ENV == "production" ? 'http://github.com/' : 
                                        'http://baidu.com/',
};

将config.js引入自定义的axios方法文件内

import axios from 'axios';
import qs from 'qs';
import {BaseParam} from '../../unit/config'

export function get(url, params,openid) {
  return new Promise((resolve, reject) => {
    axios.get(BaseParam.fetchUrl+url, {params: params})
      .then(res => {
        resolve(res.data)
      })
      .catch(err => {
        reject(err)
      })
  })
}

打开package.json文件
新增命令

4.png

执行命令：npm run build:st就可以打包出相应的域名api