vue项目env文件的使用（vue cli2和vue cli3）

Vue CLI 2 环境

在 Vue CLI 2 中，需要安装 dotenv 包来加载和使用环境变量。

步骤：

1. 安装 dotenv：首先安装 dotenv 包

   npm install dotenv --save
   

2. 创建 .env 文件：在项目的根目录下创建一个 .env 文件，并在其中定义你的环境变量。例如：

   DEFAULT_PASSWORD=Etop@123
   

3. 加载 .env 文件：在你的项目入口文件（通常是 main.js 或 index.js）中，添加以下代码来加载 .env 文件：

   require('dotenv').config();
   

4. 使用环境变量：现在你可以在代码中使用 process.env.YOUR_ENV_VAR 来访问你在 .env 文件中定义的环境变量。例如：

   createUser(row) {
     this.user = { password: process.env.DEFAULT_PASSWORD }; // 使用环境变量中的默认密码
     this.$nextTick(() => {
       this.dialogTableVisible = true;
     });
   }
   

Vue CLI 3 环境

在 Vue CLI 3 中，不需要安装 dotenv 包，可以直接使用以 VUE_APP_ 开头的环境变量，这些变量会自动被 webpack.DefinePlugin预处理。

步骤：

1. 创建 .env 文件：在项目根目录下创建一个 .env 文件，并在其中定义你的环境变量。例如：

   VUE_APP_DEFAULT_PASSWORD=Etop@123
   

2. 使用环境变量：在你的代码中直接使用 process.env.VUE_APP_XXX 来访问这些变量。例如：

   createUser(row) {
     this.user = { password: process.env.DEFAULT_PASSWORD }; // 使用环境变量中的默认密码
     this.$nextTick(() => {
       this.dialogTableVisible = true;
     });
   }
   

在 Vue CLI 3 环境下，默认情况下 只有以 VUE_APP_ 开头的环境变量 才会被注入到你的应用中。如果你希望使用非 VUE_APP_ 开头的环境变量，Vue CLI 3 本身并不直接支持。不过，你可以通过以下这种方式来解决这个问题：

修改 vue.config.js 文件
可以通过 vue.config.js 文件中的 chainWebpack 配置来修改 Webpack 的环境变量处理规则，从而让 Vue CLI 识别非 VUE_APP_ 开头的环境变量。

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.plugin('define').tap(args => {
      // 获取现有的环境变量
      const env = process.env;

      // 添加非 VUE_APP_ 前缀的环境变量到 DefinePlugin 中
      Object.keys(env).forEach(key => {
        if (!key.startsWith('VUE_APP_')) {
          args[0][`process.env.${key}`] = JSON.stringify(env[key]);
        }
      });

      return args;
    });
  }
};

这段代码会把所有不以 VUE_APP_ 开头的环境变量传递给 Webpack，从而在你的 Vue 项目中使用这些变量