vue+webpack怎么分环境进行打包

这里说下，webpack打包里面涉及到的东西，不止webpack，还有node的知识，

node的全局变量process，process.env用于返回用户环境信息对象，因为是node的全局变量，所以无需使用reqiure进行引入。

网上很多人说：npm_lifecycle_event变量是返回当前正在运行的脚本名称,pretest、test、posttest。其实就是代表当前执行循环的哪个阶段，参考链接：https://segmentfault.com/a/1190000008832423

打印这个process.env,如下图所示：

可以看到加上的变量_BASEURL已经生效，这是在dev环境下面进行打印的，test和prod环境是看不到的，只能是在打包文件中查看。

然后呢，在开发源码中，我们进行判断这个声明周期环境变量，这个是sf公司埋点的插件文件（如果没有涉及可以不用管）： 

/**
   * 相应的生产地址和测试环境地址
   */
  SfGather.url =
    process.env.npm_lifecycle_event !== 'build'
      ? 'http://218.17.248.243:40021/json_data'
      : 'https://inc-ubas-web.sf-express.com/json_data'
  console.log('SfGather.url  ' + SfGather.url)

 如果是build就用生产环境，如果不是，就用测试环境，这个是埋点的测试和生产环境的一个区分，那么同理，我们Axios请求一样的，在源码中：

axios.defaults.baseURL = process.env._BASEURL + '/api/v1/'
Vue.prototype.$axios = axios

process.env对象中添加env_BASEURL(名字可自定义)，该变量已经在prod.env.js+request.json中定义。 

在build.js中，我们把它设置为: 

process.env.NODE_ENV = 'production'

 在package.json中：

"scripts": {
    "dev": "node build/dev-server.js",
    "start": "npm run dev",
    "test": "node build/build.js",
    "build": "node build/build.js"
  },

然后在config/prod.env.js中：

'use strict'
const URL  = require('./request.json');
const target = process.env.npm_lifecycle_event
let obj = {}
if(target === 'test') {
    obj = {
        NODE_ENV: '"production"',
        _BASEURL: `'${URL.test.baseURL}'`
    }
    console.log('yeah')
} else {
    obj = {　　
        NODE_ENV: '"production"',
        _BASEURL: `'${URL.prd.baseURL}'`
    }
}
module.exports = obj;

在config添加文件request.json

{
    "dev":{
        "baseURL": "http://localhost:8088"
    },
    "test":{
        "baseURL": "http://sfim-common.sit.sf-express.com/sfimecsauth/workboard"
    },
    "prd":{
        "baseURL": "http://sfim-mcommon.sf-express.com/sfimecsauth/workboard"
    }
}

 所以关键点在哪里？首先是npm scripts里面进行指令的添加，然后再进行环境变量的赋值区分，在node的process.env对象中添加baseURL，就是这么简单。

 

当你选择了一种语言，意味着你还选择了一组技术、一个社区。——Joshua Bloch【完】