vue如何按照环境打包项目?如何在vue文件中使用process.env?

在我们的实际项目中, 生产环境和测试环境的请求地址可能是不相同的, 那么每次打包的时候都需要手动去切换这些地址, 可能经常会出现打包造成的bug

在我的项目中使用到了webSocket, 测试环境和生产环境的地址不同, 接下来我会使用process.env环境变量去判断

如果有不正确的或者其他建议，欢迎留言说明

一、如何区分生产环境、测试环境打包？

关于开发环境，我的项目中使用了proxy代理， 所以不需要区分。

修改config/prod.env.js文件如下：

"use strict";
let buildType = process.argv.slice(2)[0];
console.log("------strat build------" + buildType);
let obj = {
  NODE_ENV: '"production"'
};
switch (buildType) {
  case "prod":
    process.env.srconfig = "prod";
    obj.srconfig = '"prod"';
    break;
  case "test":
    process.env.srconfig = "test";
    obj.srconfig = '"test"';
    break;

  default:
    process.env.srconfig = "";
    obj.srconfig = '""';
    break;
}
module.exports = obj;

---

关于process.argv这个变量：

1. 第一个元素process.argv[0]——返回启动Node.js进程的可执行文件所在的绝对路径
2. 第二个元素process.argv[1]——为当前执行的JavaScript文件路径
3. 剩余的元素为其他命令行参数

也就是说，如果我运行npm run build test命令，那么process.argv.slice(2)[0]得到的就是字符串test，前提是我的package.json文件中的命令没有去做其他的更改，如果你是用了其他的插件，请根据情况修改

修改build/build.js文件如下：

// 增加下面这一行
let buildType = process.argv.slice(2)[0];

// spinner修改如下
const spinner = ora("building for " + buildType + "...");

---

到现在为止，我们可以根据打包命令的不同，保存一个环境变量process.env.srconfig， 比如使用npm run build命令，则process.env.srconfig = "prod"，使用npm run build test命令，则process.env.srconfig = "test"

####二、如何获取环境变量

• process.env: process对象是全局变量，它提供当前node.js的有关信息，以及控制当前node.js的有关进程。因为是全局变量，它对于node应用程序是始终可用的，无需require()。 既然process都是一个对象了，env自然是它的一个属性，这个属性返回包含用户环境信息的对象。在终端输入node后，在输入process.env可以看到打印出来的信息。

但是这还不够，process.env是node中的环境变量，在模块中是无法直接拿到的，比如.js、.vue，还需要配置一下DefinePlugin

• DefinePlugin: DefinePlugin可以定义一些全局变量，让我们在模块当中直接使用，不用做任何声明。

####三、接下来就可以去配置我们的请求地址了 api/index.js:

let apiPrefix = ""; // 147https --Zren
switch (process.env.srconfig) {
  case "prod":
    apiPrefix = "https://www.aaa.com:10104";
    break;
  case "test":
    apiPrefix = "http://192.168.1.154:10424";
    break;
  default:
    apiPrefix = "";
    break;
}
export default {
  /* 登录页面 */
  // 登录
  login: `${apiPrefix}/login/userLogin`,
}

在vue文件中使用：

mounted() {
  this.host = process.env.srconfig == "prod" ? 'www.aaa.com:10104' : '192.168.1.154:10424';
}