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);
}

完成