前言

在项目开发一直到上线的过程中，我们一般会配置至少三个环境（开发环境 dev、测试环境 test、生产环境prod），多则还有sit、uat等环境，不同的环境其配置也是不一样的，比如接口地址、路由模式等配置，如何更加优雅灵活地切换环境呢？我们可以配合 cross-env，构建不同的 cli build script

使用

1 安装 cross-env 依赖

npm install cross-env -D

2 分别声明不同环境的配置，比如接口地址 API_HOST

2.1 开发环境配置，位于 /config/dev.env.js

 'use strict'
  const merge = require('webpack-merge')
  const prodEnv = require('./prod.env')
  module.exports = merge(prodEnv, {
    NODE_ENV: '"development"', 
    API_HOST:'"http://dev.api.samego.com"'
  })

2.2 测试环境配置，位于 /config/test.env.js

 'use strict'
  const merge = require('webpack-merge')
  const devEnv = require('./dev.env')
  module.exports = merge(devEnv, {
    NODE_ENV: '"testing"',
    API_HOST:'"http://test.api.samego.com"'
  })

修改vue项目的 index.js 的 build 节点配置，修改如下

build: { // 声明环境，根据引进不同的环境文件 | add lines prodEnv: require('./prod.env'), testEnv: require('./test.env'), devEnv: require('./dev.env'), }

修改 build 下的 webpack.prod.conf.js 配置，修改如下：

 ... ... 
 // const env = process.env.NODE_ENV === 'testing'
 //   ? require('../config/test.env')
 //   : require('../config/prod.env')
 
 const env = config.build[process.env.env_config + 'Env']
 ... ...

修改 build 下的 build.js 配置，修改如下：

 // process.env.NODE_ENV = 'production'
 ... ...
 // const spinner = ora('building for production...')
 var spinner = ora('building for ' + process.env.NODE_ENV + ' ...')
 ... ...

在 package.json 配置文件里声明并自定义构建指令

 "scripts": {
  "build-test": "cross-env NODE_ENV=testing   env_config=test node build/build.js",
  "build-prod": "cross-env NODE_ENV=production env_config=prod node build/build.js"
 },

新建接口文件（此处可以忽略，你可以直接使用process.env.API_HOST），/src/config/application.js
```
 // 接口地址环境
 export const API_HOST = process.env.API_HOST
```

不同的命令对应不同的环境

 # 开发时使用
 npm run dev
 
 # 测试环境构建
 npm run build-test
 
 # 生产环境构建
 npm run build-prod

我是看这个老哥写的，顺便做个记录，有要问问题的可以去找他

https://learnku.com/articles/27829