Vue2 脚手架集成 dotenv-webpack 实现环境变量管理

默认情况下，Vue2 脚手架不集成 dotenv-webpack，但可以通过手动安装和配置来实现。

以下是如何手动集成 dotenv-webpack 的步骤：

1. 安装 dotenv-webpack

使用 npm 或 yarn 安装 dotenv-webpack：

npm install dotenv-webpack --save-dev

或者

yarn add dotenv-webpack --dev

2. 创建 .env 文件

在项目根目录下创建一个名为 .env 的文件，并在其中添加环境变量，例如：

VUE_APP_API_URL='http://localhost:3000/api'

3. 配置 webpack

在 webpack.config.js 中添加 dotenv-webpack 插件，并将其配置为读取 .env 文件中的变量：

const Dotenv = require('dotenv-webpack');

module.exports = {
  // ...
  plugins: [
    new Dotenv()
  ]
};

4. 使用环境变量

在 Vue 组件或其他 JavaScript 文件中，可以使用 process.env 访问 .env 文件中的变量：

const apiUrl = process.env.VUE_APP_API_URL;

注意：在 Vue2 中，环境变量必须以 VUE_APP_ 前缀开头才能被识别。