vue2中env环境文件的整合

在Vue2中，可以使用.env文件来管理不同环境下的变量。一般来说，我们会有三个不同的环境：开发环境、测试环境和生产环境。我们可以通过在项目根目录下创建不同的.env文件来管理这些环境下的变量。

首先，我们需要在根目录下创建.env.development、.env.test和.env.production三个文件，分别表示开发环境、测试环境和生产环境。在这些文件中，可以定义环境变量，例如：

// .env.development
VUE_APP_BASE_URL=http://localhost:8080

// .env.test
VUE_APP_BASE_URL=http://test.example.com

// .env.production
VUE_APP_BASE_URL=https://example.com

在这里，我们定义了一个名为VUE_APP_BASE_URL的变量，它的值在不同的环境中是不同的。

接下来，在Vue的配置文件vue.config.js中，我们可以通过process.env.NODE_ENV变量来判断当前环境，并根据不同的环境加载不同的环境变量。例如：

// vue.config.js
module.exports = {
  // ...
  devServer: {
    proxy: {
      // 根据不同的环境加载不同的代理配置
      [process.env.VUE_APP_BASE_URL]: {
        target: process.env.VUE_APP_API_URL,
      },
    },
  },
};

在这里，我们根据process.env.VUE_APP_BASE_URL的值来加载不同的代理配置。

最后，在代码中使用环境变量时，我们可以通过process.env来获取变量的值。例如：

// main.js
console.log(process.env.VUE_APP_BASE_URL);

在这里，我们打印出VUE_APP_BASE_URL的值，它会根据当前的环境而不同。