cross-env是跨平臺設置和使用環境變量的腳本。
使用 cross-env 可以設置在不同的平臺上有相同的NODE_ENV參數。

話不多說，直接開始

1、安裝cross-env

npm install --save-dev cross-env

2、自定義打包命令

// package.json
"scripts": {
    "build:dev": "cross-env NODE_ENV=production env_config=dev node build/build.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"
  }

3、config目錄添加對應環境的xxx.env.js文件

image.png

dev.env.js

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  env_config: '"dev"',
  BASE_URL: '"http://dev.com"', // 本地環境訪問接口
})

test.env.js

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  env_config: '"test"',
  BASE_URL: '"http://test.com"', // 測試環境訪問接口
}

prod.env.js

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  env_config: '"prod"',
  BASE_URL: '"http://prod.com"', // 生產環境訪問接口
}

env.js中的參數可以按照需求以鍵值對的方式自定義
注意：如果要在linux環境部署自動打包的話，需要注意key的大小寫

4、修改打包配置

build/webpack.prod.conf.js 根據env_config變量動態引入env.js

···
// const env = require('../config/prod.env')
const env = require(`../config/${ process.env.env_config ? process.env.env_config : 'prod'}.env`)
···

5、自定義變量的使用

可以通過process.env來獲取全局變量
例如：axios設置baseUrl

import Vue from 'vue'
import Axios from 'axios'
···
// 不需要跨域的情況可以直接這樣設置baseUrl
Axios.defaults.baseURL = process.env.BASE_URL
// 若是本地調試需要跨域就要判斷是development還是production，
Axios.defaults.baseURL = process.env.NODE_ENV === 'development' ? '' : process.env.BASE_URL
···

以上便是通過cross-env配置vue-cli2環境變量的分享，希望能幫到大家，謝謝
初寫簡書，敬請指教