現實中的問題：有時候版本上線的時候，打包時忘記切換環境，將測試包推上正式服務器，那你就會被批了。

期望：在寫打包的命令行的時候就覺得自己在打包正式版本，避免推包時候的，不確信自己的包是否正確。

既然有了期望，那麽就要開始百度如何去實現呢。

下面先開始介紹ant design的方法：

ant design的打包工具是roadhog，那麽從roadhog下手。

在roadhog文檔中，發現define的配置可以傳遞給代碼。

在ant design pro的issue中搜索中，發現環境變量的配置。

我這也不啰嗦了，直接貼代碼了

那麽介紹完ant disign的，開始介紹vue的吧

首先介紹下用的包吧，cross-env是為了解決跨平臺的包，可以是命令行在window和mac上都可以使用。

第一步：

npm i --save-dev cross-env

第二步：

在根目錄下的config下：新建一個test.env.js文件，對標已存在的prod.env.js的文件

‘use strict‘
module.exports = {
  NODE_ENV: ‘"test"‘
}

在同級目錄下的index.js中

紅色框的是新加的，在build對象中同樣加入這兩行代碼，為了讓在本地開發也可以切換正式測試的環境。

第三步

在根目錄build文件夾下的的webpackage.prod.conf.js和webpackage.dev.conf.js文件中，獲取剛才配置的test.env.js和prod.env.js

具體操作如下：

// const env = require(‘../config/prod.env‘)  註釋這行原本的代碼
const env = config.build[process.env.env_config+‘Env‘]  // 新加這行獲取js的代碼

new webpack.DefinePlugin({
      ‘process.env‘: env // 將獲取的js，放入process.env
    }),

同級目錄下build.js

// 註釋掉這行代碼
// process.env.NODE_ENV = ‘production‘

// 修改spinner的定義
// const spinner = ora(‘building for production...‘)
 

var spinner = ora(‘building for ‘ + process.env.NODE_ENV + ‘ of ‘ + process.env.env_config+ ‘ mode...‘ )

第四步：

設置打包命令行和起本地服務的命令行

"dev:test": "cross-env NODE_ENV=development env_config=test webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "dev:prod": "cross-env NODE_ENV=development env_config=prod webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",

"build:test": "cross-env NODE_ENV=production env_config=test node build/build.js",
    "build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js",

第五部

在代碼獲取值

console.log(process.env);

以上就介紹完自動分環境打包

前端自動分環境打包（vue和ant design）