區(qū)分線上環(huán)境、測試環(huán)境、XX環(huán)境打包， 如果有不正確的或者其他建議，請留言說明

一、根據(jù)環(huán)境變量配置BASE_URL

修改config/prod.env.js文件如下：

'use strict'
// 可配置一個默認的環(huán)境prod，這樣運行npm run build 默認就是prod的環(huán)境
let buildType = process.argv.slice(2)[0] || 'prod' 
/**
 * 這里是為了把開發(fā)環(huán)境區(qū)分開
 * 看一下開發(fā)環(huán)境的命令："dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
 * 具體情況根據(jù)自己的命令來，總之區(qū)分開開發(fā)環(huán)境即可，也可以寫成"dev": "webpack-dev-server development ......."
 */
if (process.argv.slice(2)[0] == '--inline') return
console.log('------strat build------' + buildType)
let BASE_URL
switch (buildType) {
  case 'prod':  // 線上環(huán)境打包命令 npm run build
    BASE_URL = 'https://www.123123.com:10104'
    break
  case 'test':  // 測試環(huán)境打包命令 npm run build test
    BASE_URL = 'http://192.168.1.189:10425'
    break
  case 'xxx': // npm run build xxx
    BASE_URL = 'https://www.12343.com:10107'
    break
  default:
    BASE_URL = 'https://www.123123.com:10104'
    break
}
module.exports = {
  NODE_ENV: '"production"',
  BASE_URL: JSON.stringify(BASE_URL),// 這里需要轉(zhuǎn)為字符串，不然其他文件中獲取會得到變量的形式
}

修改config/dev.env.js文件如下：

"use strict";
if (process.argv.slice(2)[0] != '--inline') return
let BASE_URL = '/api' //本立proxy代理的前綴
console.log('------strat dev------')
module.exports = {
  NODE_ENV: '"development"',
  BASE_URL: JSON.stringify(BASE_URL)
}

• 關于process.argv這個變量：

1. 第一個元素process.argv[0]——返回啟動Node.js進程的可執(zhí)行文件所在的絕對路徑
2. 第二個元素process.argv[1]——為當前執(zhí)行的JavaScript文件路徑
3. 剩余的元素為其他命令行參數(shù)

也就是說，如果我運行npm run build test命令，那么process.argv.slice(2)[0]得到的就是字符串test，前提是我的package.json文件中的命令沒有去做其他的更改，如果你是用了其他的插件，請根據(jù)情況修改

image.png

• 修改打包時命令行提示
  修改build/build.js文件如下：
  
  image.png

// 增加下面這一行
let buildType = process.argv.slice(2)[0];

// spinner修改如下
const spinner = ora("building for " + buildType + "...");

二、獲取環(huán)境變量前提條件（配置插件）

• process.env:
  process對象是全局變量，它提供當前node.js的有關信息，以及控制當前node.js的有關進程。因為是全局變量，它對于node應用程序是始終可用的，無需require()。
  既然process都是一個對象了，env自然是它的一個屬性，這個屬性返回包含用戶環(huán)境信息的對象。在終端輸入node后，在輸入process.env可以看到打印出來的信息。

但是這還不夠，process.env是node中的環(huán)境變量，在模塊中是無法直接拿到的，比如.js、.vue，還需要配置一下DefinePlugin

• DefinePlugin:
  DefinePlugin可以定義一些全局變量，讓我們在模塊當中直接使用，不用做任何聲明。
  如下：
  webpack.dev.conf.js

plugins: [
    ...
    new webpack.DefinePlugin({
      'process.env': require('../config/dev.env')
    }),
    ...
   ]

webpack.prod.conf.js

plugins: [
    ...
    new webpack.DefinePlugin({
      'process.env': require('../config/prod.env')
    }),
    ...
   ]

三、配置項目請求地址（BASE_URL）

到現(xiàn)在為止，我們可以根據(jù)打包命令的不同，所配置的BASE_URL不同， 直接在axios封裝文件中獲取即可：

const request = axios.create({
  baseURL: process.env.BASE_URL
})

在vue文件中使用的獲取方式相同