vue-cli2自定义打包环境：使用cross-env定义环境变量

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环境变量的分享，希望能帮到大家，谢谢
初写，敬请指教