一、关于开发环境、测试环境、生产环境

1、开发环境（development）：

开发环境是程序猿们专门用于开发的服务器，配置可以比较随意， 为了开发调试方便，一般打开全部错误报告。(程序员接到需求后，开始写代码，开发，运行程序，看看程序有没有达到预期的功能；)

2、测试环境（testing）：

一般是克隆一份生产环境的配置，一个程序在测试环境工作不正常，那么肯定不能把它发布到生产机上。(程序员开发完成后，交给测试部门全面的测试，看看所实现的功能有没有bug，测试人员会模拟各种操作情况；)

3、生产环境（production）：

是指正式提供对外服务的，一般会关掉错误报告，打开错误日志。(就是线上环境，发布到对外环境上，正式提供给客户使用的环境。)

三个环境也可以说是系统开发的三个阶段：开发->测试->上线，其中生产环境也就是通常说的真实环境。

二、配置开发环境、测试环境、生产环境以及运行变量

1、准备配置文件

在 config 目录下准备 prod.env.js、dev.env.js、test.env.js，如：

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  BASE_API: '"https://easy-mock.com/mock/5950a2419adc231f356a6636/vue-admin"',
  SERVER_BASE_API: '"/service-h5"',
  SERVER_ACL_API: '"/service-h5"',
  ASSETS_PUBLIC_PATH: '"/h5/"', // 项目部署路径
}

2、配置 webpack.base.conf.js

修改 build 目录下的 webpack.base.conf.js 文件：

... ...
const config = require('../config')
// ////////////////////////////////////////////////////////////////////////////////////////////////////////
const devConfig  = require('../config/dev.env')
const testConfig  = require('../config/test.env')
const prodConfig  = require('../config/prod.env')
const webpack = require('webpack')
function getConfig(){
  const env =  process.env.NODE_ENV
  let config = ''
    switch(env){
      case 'development':
          config = devConfig;
          break;
      case 'test':
          config = testConfig;
          break;
      default :
          config = prodConfig;
          break;
                        
    }
    return config
}
const envConfig = getConfig()
// ////////////////////////////////////////////////////////////////////////////////////////////////////////
const { VueLoaderPlugin } = require('vue-loader')
... ...
// ////////////////////////////////////////////////////////////////////////////////////////////////////////
  plugins: [
    new webpack.DefinePlugin({
      'process.env': envConfig
    }),
    ... ...
  ],
// ////////////////////////////////////////////////////////////////////////////////////////////////////////
... ...

3、使用 npm 安装 cross-env

npm install --save-dev cross-env

4、配置 package.json

修改 package.json 文件：

  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "cross-env NODE_ENV=production node build/build.js",
    "build-test": "cross-env NODE_ENV=test node build/build.js",
   ... ...
  },

5、使用运行变量

在项目的 js 文件内，通过 process.env.变量名 使用自定义的运行环境变量，如：

script.src = process.env.ASSETS_PUBLIC_PATH + 'static/js/gd_sdc_load.js'

---