dva配置多环境变量启动

基于dva搭建的项目如何设置多环境变量打包启动，主要配置如下：

1、npm安装cross-env

     cross-env是运行跨平台设置和使用环境变量的脚本，主要解决windows、ios、linux系统下统一配置环境变量的。

npm install --save-dev cross-env install cross-env

之前试过通过 set API = tes 的方式设置变量，但是set方式设置的变量只能在windows环境下成功，其余环境下（ios, Linux）将会无效。

2、修改package.json文件 

   这里主要是为启动命令设置变量，大致意思是，根据不同的启动命令设置不同的后端请求地址，实现多环境启动。

"scripts": {
    "start": "cross-env API_EVN=localdev ./node_modules/roadhog/bin/roadhog.js dev",
    "prebuild": "npm run clean",
    "build:dev": "cross-env API_EVN=dev ./node_modules/roadhog/bin/roadhog.js build",
    "build:test": "cross-env API_EVN=test ./node_modules/roadhog/bin/roadhog.js build",
    "build:prod": "cross-env API_EVN=prod ./node_modules/roadhog/bin/roadhog.js build",
    "lint": "eslint --ext .js src test",
    "clean": "rimraf dist",
    "precommit": "npm run lint"
  },

我这里区分了本地启动(npm start)、开发环境启动（npm run build:dev）、生产环境启动（npm run build:prod）和测试环境启动（npm run build:test），分别通过API_EVN进行区分;

3、修改.webpackrc文件

export default {
.
.
.
  define: {
    'process.env': {
      'API_EVN': process.env.API_EVN,
    },
  },
.
.
.
};

4、config文件处设置公共路径

const localdev = 'https://***';
const dev = 'https://***/dev';
const test = 'https://***/test';
const prod = 'https://***/dev';
// const API_EVN = process.env.API_EVN;
function getApiHost(value) {
  if (value === 'localdev') {
    return localdev;
  } else if (value === 'dev') {
    return dev;
  } else if (value === 'test') {
    return test;
  } else if (value === 'prod') {
    return prod;
  }
}

module.exports = {
  BASE_PATH: '/',
  API_HOST: process.env.API_EVN,
  API: getApiHost(process.env.API_EVN),
};

接口引用

import { API } from '@/config/env';

export function fetchLookupList(params) {
  return get(`${API}/v1/lookups`, params);
}

完成