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

Vue CLI 2 环境

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

步骤：

安装 dotenv：首先安装 dotenv 包
```
npm install dotenv --save
```
创建 .env 文件：在项目的根目录下创建一个 .env 文件，并在其中定义你的环境变量。例如：
```
DEFAULT_PASSWORD=Etop@123
```
加载 .env 文件：在你的项目入口文件（通常是 main.js 或 index.js）中，添加以下代码来加载 .env 文件：
```
require('dotenv').config();
```

使用环境变量：现在你可以在代码中使用 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预处理。

步骤：

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

使用环境变量：在你的代码中直接使用 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;});}
};