CROSS-ENV不同環境配置

項目背景

爲了適應h5環境搭建需求，需要動態配置開發，測試，生產三種對應域名及其及打包命令。使用cross-env可以讓配置環境更加清晰明瞭還好管理。

簡介

cross-env的作用是不需要全局配置NODE_ENV在scripts腳本中修改NODE_ENV的值從而實現不同環境中proccess.env.NODE_ENV的不同，而config的工作原理就是基於NODE_ENV這個值的，所以推薦兩者結合使用。

安裝 cross-env

npm install --save-dev cross-env

使用

npm run dev 打包的是開發環境
npm run build--qa 打包的是測試環境
npm run build--prod 打包的是生成環境

 

"dev":"cross-env NODE-ENV=development node build/webpack.deb.conf.js"
"build --qa":"cross-env NODE_ENV=testing node build/build.js"
"build --prod":"cross-env NODE_ENV=production node build/build.js"

　　

修改config裏面的參數，如下是環境的配置信息，注意NODE_ENV裏的配置名稱與打包命令的相一致:

//dev環境
module.exports = {
  NODE_ENV: '"development"',
  BASE_API: 'http://10.250.115.99/statistics' //代理路徑
}
//測試環境
module.exports = {
  NODE_ENV: '"testing"',
  BASE_API: 'http://10.250.115.99/statistics' //代理路徑
}
 //生產環境
 module.exports = {
   NODE_ENV: '"production"',
   BASE_API: 'http://ai.iteldrive.com/statistics' //代理路徑
 }

　　

修改config/index.js (注意新增prodEnv、testEnv)

'use strict'
const path = require('path')

module.exports = {
  build: {
    prodEnv: require('./prod.env'),
    testEnv: require('./test.env'),
    index: path.resolve(__dirname, '../dist/index.html'),
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './', 
    productionSourceMap: true,
    devtool: '#source-map',
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],
    bundleAnalyzerReport: process.env.npm_config_report
  }
}

　　

在webpackage.prod.conf.js中配置構建環境參數

const env = process.env.NODE_ENV === 'testing'
  ? require('../config/test.env')
  : require('../config/prod.env')

調整build/build.js

var spinner = ora('building for ' + process.env.NODE_ENV + '...')
spinner.start()

以上步驟配置完畢之後，重啓npm run build--qa，此時就會發現運行測試環境的代碼已經打包生成好了（dist目錄），問題是環境配好了，怎麼配置不用環境的api呢？

配置不同環境api，根據匹配NODE_ENV的不同的值

let API_URL
if (process.env.NODE_ENV === 'development') {
  API_URL = 'http://10.250.115.99/statistics'
} else if (process.env.NODE_ENV === 'production') { // 測試環境
  API_URL = 'http://ai.iteldrive.com/statistics'
} else if (process.env.NODE_ENV === 'testing') {
  API_URL = 'http://10.250.115.99/statistics'
} else {
  API_URL = 'http://ai.iteldrive.com/statistics'
}
//console.log(API_URL + '請求api************')
const http = axios.create({
  baseURL: API_URL, // api的base_url,
  timeout: 1000 * 30,
  withCredentials: true,
  headers: {
    'Content-Type': 'application/json; charset=utf-8'
  }

})

　　

現在分別執行 npm run dev、npm run build --qa 和 npm run build --prod 就可以得到想要的結果了