cross-env是跨平臺(tái)設(shè)置和使用環(huán)境變量的腳本。
使用 cross-env 可以設(shè)置在不同的平臺(tái)上有相同的NODE_ENV參數(shù)。

話不多說(shuō)，直接開(kāi)始

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目錄添加對(duì)應(yīng)環(huán)境的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"', // 本地環(huán)境訪問(wèn)接口
})

test.env.js

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  env_config: '"test"',
  BASE_URL: '"http://test.com"', // 測(cè)試環(huán)境訪問(wèn)接口
}

prod.env.js

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  env_config: '"prod"',
  BASE_URL: '"http://prod.com"', // 生產(chǎn)環(huán)境訪問(wèn)接口
}

env.js中的參數(shù)可以按照需求以鍵值對(duì)的方式自定義
注意：如果要在linux環(huán)境部署自動(dòng)打包的話，需要注意key的大小寫(xiě)

4、修改打包配置

build/webpack.prod.conf.js 根據(jù)env_config變量動(dòng)態(tài)引入env.js

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

5、自定義變量的使用

可以通過(guò)process.env來(lái)獲取全局變量
例如：axios設(shè)置baseUrl

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

以上便是通過(guò)cross-env配置vue-cli2環(huán)境變量的分享，希望能幫到大家，謝謝
初寫(xiě)簡(jiǎn)書(shū)，敬請(qǐng)指教