vue2中env环境文件的整合

在Vue2中，我们可以使用.env文件来定义环境变量，例如API的URL、数据库连接等。在开发过程中，我们通常会有多个环境（开发、测试、生产等），每个环境都有不同的配置项。为了方便管理和使用，我们可以将这些环境配置项抽离出来，存放到不同的.env文件中。

下面是.env文件的命名规则：

- .env：默认的环境变量文件，所有环境都会加载这个文件。
- .env.local：本地环境变量文件，只有在本地开发环境中才会加载。
- .env.[mode]：指定环境变量文件，[mode]代表环境名称，例如.env.production代表生产环境变量文件。

在Vue2中，我们可以通过webpack的DefinePlugin插件将环境变量注入到应用程序中。具体步骤如下：

1. 安装dotenv-webpack和cross-env插件：

npm install dotenv-webpack cross-env --save-dev

2. 在项目根目录下创建.env文件，并添加环境变量：

# .env
VUE_APP_BASE_API=http://localhost:3000/api

3. 在package.json文件中添加脚本命令：

{
  "scripts": {
    "serve": "cross-env NODE_ENV=development vue-cli-service serve",
    "build": "cross-env NODE_ENV=production vue-cli-service build",
    "test": "cross-env NODE_ENV=test vue-cli-service test:unit"
  }
}

4. 在vue.config.js中配置webpack：

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

module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.DefinePlugin({
        'process.env': {
          BASE_API: JSON.stringify(process.env.VUE_APP_BASE_API)
        }
      }),
      new dotenv()
    ]
  }
}

5. 在代码中使用环境变量：

axios.get(`${process.env.BASE_API}/users`)

这样，在不同的环境中，我们只需要修改对应的.env文件即可，无需修改代码。同时，在webpack打包时，会根据NODE_ENV来选择加载哪个.env文件，从而方便地管理不同环境的配置项。