vue多环境打包

方法1

node属性process.argv

改属性为node执行命令获取到的命令集合

如打包命令为npm build dev则获取到集合['npm', 'build', 'dev']，则在集合中能获取到dev这个数值
在node环境中可以使用这个变量
具体可参考node文档

• webpack.base.conf.js
  在这个文件下可以使用变量``process.argv`

则定义变量isProduction

var isProduction = 0;
for(var i = 0;i < process.argv.length;i++){
  if(process.argv[i]=="production"){
      isProduction = 1;
      break;
  }else if(process.argv[i] == "prev"){
      isProduction = 2;
      break;
  }
}

并且在webpackConfig.module.rules中为vue共用变量文件注入此变量

module: {
    rules: [
        {
            test: require.resolve('../src/constant'),
            loader: "imports-loader?isProduction=>" +  JSON.stringify(isProduction)
        }
    ]
}

• vue中定义一个文件存放变量

var tmp = "";
if(isProduction == 1){          //生产
    tmp =  "生产环境地址";
}else if(isProduction == 2){    //预生产
    tmp =  "预生产环境地址";
}else{                          //开发环境
    tmp = "开发环境地址";
}

export const API_BASE_URL = tmp;

• 修改 package.json 的script 语句

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

后续在vue项目中导入这个文件就能够使用

方法2

• 在config文件夹中新建文件xx.env.js

'use strict'
    module.exports = {
     NODE_ENV: '"production"',
     API_ROOT: '"xx环境要使用的地址"',
    }

• 修改./build/webpack.prod.conf.js文件 修改 evn

//注释掉之前的代码
// const env = process.env.NODE_ENV === 'testing'
//   ? require('../config/test.env')
//   : require('../config/prod.env')

//修改后的代码
const env = require('../config/' + process.env.env_config+'.env')

• 安装 cross-env 的插件

npm install cross-env -dev--save

• 修改 package.json 的script 语句

 "scripts": {
  "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
  "start": "npm run dev",
  "build": "node build/build.js",
  "build:dev": "cross-env NODE_ENV=production env_config=dev node build/build.js"
  }

方法三

在某个文件夹下定义一个存放地址的文件，每次打包前切换变量值