webpack开发环境和生产环境的一点理解

    最近新开了一个项目。同事们把axiso的配置写死了。这种写法是不对的，api地址有开发和生产之分，开发api就是npm run dev的时候连接的地址，生产则是npm  run build的时候连接的地址。一般来说，开发地址配置测试环境的地址，生产地址配置服务器的相对路径。

    具体如下：

axiso/index.js

import {BASE_URL} from "../common/constant"
// 创建axios实例
const service = axios.create({
	baseURL: BASE_URL, // api的base_url
	timeout: 30000,                  // 请求超时时间
})

common/constant.js

/**
 * 常量键值对
 */
import Api from '../api/Api'

const BASE_URL=Api.BASE_URL;
export {BASE_URL}

api/Api.js

//初始化配置操作根据生产环境还是线上环境
class Api{
  constructor(){
  console.log(process.env.NODE_ENV)
    if(process.env.NODE_ENV==='development'){
      this.BASE_URL='测试环境地址'
    }else{
      this.BASE_URL=''//生产环境地址
    }
  }
}
const newApi = new Api()
export default newApi;

最后，最重要的，api.js中识别  process.env.NODE_ENV字段来修改BASE_URL,这个process.env.NODE_ENV的值是在webpack中配置的

        new webpack.DefinePlugin({
            'process.env': '"production"'
        })