1、基于vue-cli

在实际项目开发中，经常会碰到需要环境变量的情景。在vue-cli的环境下，默认已经配置了一个NODE_ENV的环境变量，当npm run dev的时候这个是development, 当npm run build 的时候这个是production。用过vue-cli开发的通常对这个都不陌生,用这个最多的地方基本就是我们配置网络请求的域名头了。

但是默认提供的development和production这两种情况完全不够用呀有木有，比如实际上有本地开发的地址、线上测试的地址和生产环境的地址等，然后本地开发时不同的模块又有不同的端口怎么破？好麻烦有木有？！所以这时就需要自己来动手啦！

由于windows不支持NODE_ENV=development这样的设置方式（会报错）。这时，就需要借助于强大的cross-env啦（他能够提供一个设置环境变量的scripts，让你能够以unix方式设置环境变量，然后在windows上也能兼容运行。）

首先，安装npm i cross-env -D

在package.json中，默认的配置是这样的：

  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js"
  },

现在可以把它改成这样：

  "scripts": {
    "dev": "cross-env MY_API_ENV=local webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "devTest": "cross-env MY_API_ENV=test webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "devProduct": "cross-env MY_API_ENV=product webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "cross-env MY_API_ENV=test node build/build.js",
    "buildProduct": "cross-env MY_API_ENV=product node build/build.js"
  },

由于搭配webpack重新设置了process.env的值，需要在webpack.dev.conf.js及webpack.prod.conf.js文件中：

webpack.dev.conf.js
    new webpack.DefinePlugin({
      'process.env': require('../config/dev.env'),
      'process.env.MY_API_ENV': JSON.stringify(process.env.MY_API_ENV)//增加此行
    })
webpack.prod.conf.js
    new webpack.DefinePlugin({
      'process.env': env,
      'process.env.MY_API_ENV': JSON.stringify(process.env.MY_API_ENV)//增加此行
    })

最后，定义一个api config文件，内容大概如下：

let apiCon = {}
if(process.env.MY_API_ENV === 'local'){
    apiCon = {
        // ...
    }
}else if(process.env.MY_API_ENV === 'test'){
    apiCon = {
        // ...
    }
}else if(process.env.MY_API_ENV === 'product'){
    apiCon = {
        // ...
    }
}

export {
    apiCon
}

酱紫就可以愉快滴玩耍啦！

2、基于nuxt

如果是基于nuxt，那么可以这样：

nuxt.config.js文件中
    env: {
        MY_API_ENV: process.env.MY_API_ENV
    }

同理package.json的scripts中

"dev": "cross-env MY_API_ENV=local nuxt",
"devTest": "cross-env MY_API_ENV=test nuxt",
"devProduct": "cross-env MY_API_ENV=product nuxt",
"build": "cross-env MY_API_ENV=test nuxt build",
"buildProduct": "cross-env MY_API_ENV=product nuxt build",

相关资料

cross-env简介

NodeJs/Vue项目中对process.env的使用