1： 安装插件cross-env

  npm install cross-env --save

2: 修改config中参数,新添pret环境

image.png

config/dev.env.js文件
=========================================
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
   NODE_ENV: '"development"',
   BASE_API: '"http://XXXXXXXXX"'
})

config/pre.env.js文件
=========================================
'use strict'
module.exports = {
  NODE_ENV: '"preEnvironment"',
  ENV_CONFIG: '"pre"',
  BASE_API: '"http://xx.xx.xxx.xx"'
}

config/prod.env.js文件
========================================
'use strict'
module.exports = {
  NODE_ENV: '"production"',
  ENV_CONFIG: '"prod"',
  BASE_API: '"http://xx.xxx.xx.xxx"'
}

3:修改package.json文件中‘scripts’

 修改‘scripts’中dev,新增build:prod、build:pre
====================================================
"scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js",
    "build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js",
    "build:pre": "cross-env NODE_ENV=preEnvironment env_config=pre node build/build.js"
  },

4:config/index.js （如果用到vue-resource,第四步和第七步可以省略，它会自动匹配域名配置）

新增prodEnv、preEnv
====================================================
build: {
    prodEnv: require('./prod.env'), // 线上环境
    preEnv: require('./pre.env'), // 预发布环境
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),
    ...暂省略

5:在webpackage.prod.conf.js中使用构建环境参数

修改14行env
====================================================
const env = config.build[process.env.env_config + 'Env'] || require('../config/prod.env')
// const env = require('../config/prod.env')

6:调整build/build.js

注释掉第4行
====================================================
// process.env.NODE_ENV = 'production'

修改第14行spinner
====================================================
// const spinner = ora('building for production...')
const spinner = ora('building for ' + process.env.NODE_ENV + ' of ' + process.env.env_config + ' mode...')

7:获取不同的api

可获取到不同环境下的api
====================================================
process.env.BASE_API // 可获取到不同环境下的api