vue2.0分环境打包及分析

1.修改package.json

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

当执行 npm run build 时，启动了node 服务，去执行 build/build.js 文件内容。

以下是build/build.js部分内容

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

process.env.NODE_ENV = 'production'

const ora = require('ora')
const rm = require('rimraf')
const path = require('path')
const chalk = require('chalk')
const webpack = require('webpack')
const config = require('../config')
//此处引入了 ./webpack.prod.conf 文件
const webpackConfig = require('./webpack.prod.conf')

以下是./webpack.prod.conf部分内容

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
// env 来自../config/prod.env
const env = require('../config/prod.env')

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: [
    // 配置env
    new webpack.DefinePlugin({
      'process.env': env
    }),
   ]
}

以下是../config/prod.env内容

'use strict'
let USE_DEFAULT_ENV_CONFIG = true;
let DEFAULT_ENV_CONFIG = 'prod';
let ACTIVE_ENV_CONFIG;
let allowed_envs = ['dev', 'test', 'prod'];//命令窗口允许传的参数

let npm_config_argv = process.env.npm_config_argv;
if (npm_config_argv) {
  //解析使用参数所激活的环境参数,存在时取消默认使用的环境
  let npm_config_argv_obj = JSON.parse(npm_config_argv);
  //.npmrc具体配置信息 npm_config_argv: '{"remain":[],"cooked":["run","dist"],"original":["run","dist]}',
  let original = npm_config_argv_obj.original;
  //如果存在且是三个参数
  if (original && original.length == 3) {
    USE_DEFAULT_ENV_CONFIG = false;
    //获取传入环境参数【匹配第三个参数】
    ACTIVE_ENV_CONFIG = original[2].replace("--", ""); //--dev --test
    //console.log("current active env config : " + ACTIVE_ENV_CONFIG);
    //验证必须为其中之一
    let allowed = false;
    for (let i in allowed_envs) {
      let env = allowed_envs[i];
      if (env === ACTIVE_ENV_CONFIG) {
        allowed = true;
        break;
      }
    }

    if (!allowed) {
      throw new Error("the active env config error : " + ACTIVE_ENV_CONFIG);
    }

    let reset_params = true;
    if (reset_params) {
      original.splice(2, 1);
      let cooked = npm_config_argv_obj.cooked;
      if (cooked) {
        let cooked_lenght = cooked.length;
        if (cooked_lenght >= 3 && cooked[cooked_lenght - 1] === "--" + ACTIVE_ENV_CONFIG) {
          cooked.splice(cooked_lenght - 1, 1);
        }
      }
      process.env.npm_config_argv = JSON.stringify(npm_config_argv_obj);
    }
  }
}

if (USE_DEFAULT_ENV_CONFIG) {
  ACTIVE_ENV_CONFIG = DEFAULT_ENV_CONFIG;
}

module.exports = {
  NODE_ENV: '"production"',
  //当前所应用的env config
  ACTIVE_ENV_CONFIG: '"' + ACTIVE_ENV_CONFIG + '"',
  //当前是否使用默认的env config(若为true,则development环境应用为dev,反之则应用为ACTIVE_ENV_CONFIG)
  USE_DEFAULT_ENV_CONFIG: USE_DEFAULT_ENV_CONFIG,
  //配置不同环境的属性值 (通过process.env[process.env.ACTIVE_ENV_CONFIG] 获取对应的值)
  // 根据不同的需求配置不同的参数和接口地址

  // 本地环境接口地址
  dev: {
    API_PATH: '"xxxx"'
  },
  // 测试环境接口地址
  test: {
    API_PATH: '"xxxx"'
  },
  // 生产环境接口地址
  prod: {
    API_PATH: '"xxxx"'
  }
}

使用 接口封装处使用

//配置接口地址 获取当前的配置
// //webpack.DefinePlugin
let ACTIVE_ENV_CONFIG = process.env.ACTIVE_ENV_CONFIG
// 获取配置环境的公共参数值
let envParams = process.env[ACTIVE_ENV_CONFIG]
axios.defaults.baseURL = envParams.API_PATH

打包命令

测试环境 npm run build --test

生产环境 npm run build --prod

开发环境 npm run build --dev