第一步：创建命令

下面在 packge.json 文件中，创建一条命令

{

  "name": "xxxx",

  "version": "1.0.0",

  "description": "xxxx",

  "author": "",

  "private": true,

  "scripts": {

    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",

    "start": "npm run dev",

    "build": "node build/build.js",

    "build_dev": "node build/build_dev.js"  // 1、此处是自定义的。注意：不要把此注释复制代码中

  },

  "dependencies": {...

  },

  "devDependencies": {

    .....

}

第二步：创建 build_dev.js

在 build文件夹中，复制build.js文件，并且重新命名为 build_dev.js

第三步：定义变量

下面的变量用于判断打包那个配置环境

'use strict'

require('./check-versions')()

process.env.NODE_ENV = 'develop' // 1、定义变量

const ora = require('ora')

const rm = require('rimraf')

const path = require('path')

const chalk = require('chalk')

const webpack = require('webpack')

const config = require('../config')

const webpackConfig = require('./webpack.prod.conf')

const spinner = ora('building for production...')

spinner.start()

---

第四步：判断是否打哪个包

---

此处才是真正的换打包的地方。在build文件夹中找到 webpack.prod.conf 文件，修改下面的打包配置

'use strict'

const path = require('path')

const utils = require('./utils')

const webpack = require('webpack')

const config = require('../config')

const merge = require('webpack-merge')

const baseWebpackConfig = require('./webpack.base.conf')

const CopyWebpackPlugin = require('copy-webpack-plugin')

const HtmlWebpackPlugin = require('html-webpack-plugin')

const ExtractTextPlugin = require('extract-text-webpack-plugin')

const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')

const env = process.env.NODE_ENV == ' develop' ? require('../config/dev.env') :

require('../config/prod.env') ; // 1、此处就是判断哪个文件配置打包，如果是 devs 运行的，则测试包

const webpackConfig = merge(baseWebpackConfig, {

  module: {

    rules: utils.styleLoaders({

      sourceMap: config.build.productionSourceMap,

      extract: true,

      usePostCSS: true

    })

  },

  devtool: config.build.productionSourceMap ? config.build.devtool : false,

  output: {

    path: config.build.assetsRoot,

    filename: utils.assetsPath('js/[name].[chunkhash].js'),

    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')

  },

  plugins: [

    // http://vuejs.github.io/vue-loader/en/workflow/production.html

    new webpack.DefinePlugin({

      'process.env': env

    }),

    // UglifyJs do not support ES6+, you can also use babel-minify for better treeshaking:

第五步：请求

此处略过一些配置测试与正式环境详情了。在 config 文件中的 dev.env.js与prod.env.js 文件，进行配置变量。在axios 封装的文件中，使用 process.env.xx进行获取数据

第六步：打包

进行 npm run build_dev(测试环境) ，npm run build(正式环境)。下面就是请求了。