vue2+webpack怎样分环境打包

时间:2022-11-26 21:02:42

  今年有机会做了一个vue2的单页面应用的项目,从开发到上线经历了两个环境。测试环境以及正式环境我都是跑npm run build。这两个环境的变量当前是不一样的,每次打包都要去改变量,感觉有点小麻烦。后来参考同事的,他们项目里面分环境跑不同的命令,得到不同的包。例如测试环境npm run test ,正式环境 npm run build。

  需在文件config/prod.env.js配置  

const target = process.env.npm_lifecycle_event;
  if (target == 'test') {
  //测试
  var obj = {
  NODE_ENV: '"production"',
  //post用当前域名
  API_ROOT: '""',
  //数据字典
  API_ROOT_DICT:'"http://test.gw.fdc.com.cn"',
  }
}else {
  //线上
  var obj = {
  NODE_ENV: '"production"',
  //post用当前域名
  API_ROOT: '""',
  //数据字典
  API_ROOT_DICT:'"http://gw.fdc.com.cn"',
  }
}
module.exports = obj;

npm 提供一个npm_lifecycle_event变量,返回当前正在运行的脚本名称,比如pretesttestposttest等等。所以,可以利用这个变量,在同一个脚本文件里面,为不同的npm scripts命令编写代码。