VUE CLI3 + cross-env 巧妙配置环境变量（含源码解析）

2023-11-22 13:26:46

VUE CLI3 + cross-env 巧妙配置环境变量（含源码解析）

作为一名充满热情的 Vue.js 开发者，在项目开发过程中，我们经常需要使用环境变量来存储一些敏感信息，比如数据库连接字符串、API 密钥等。使用环境变量可以很好地将这些敏感信息与代码分离，从而提高代码的安全性。

在 VUE CLI3 中，我们可以通过多种方式来配置环境变量，其中比较常见的方式是使用 .env 文件。.env 文件是一个纯文本文件，其中包含了各种环境变量的键值对。VUE CLI3 会自动加载 .env 文件中的环境变量，并将其注入到 Vue.js 应用程序中。

但是，直接使用 .env 文件来配置环境变量可能会存在一些问题。比如，当你在不同的环境（例如开发环境、测试环境、生产环境）中运行应用程序时，可能需要使用不同的 .env 文件。这就会导致代码的可移植性下降，并且容易出错。

为了解决这个问题，我们可以使用 cross-env 工具来配置环境变量。cross-env 是一个跨平台的命令行工具，它可以帮助我们轻松地设置和使用环境变量。

使用 cross-env 配置环境变量

要使用 cross-env 配置环境变量，首先需要在项目中安装 cross-env。你可以使用以下命令安装 cross-env：

npm install --save-dev cross-env

安装完成后，你可以在项目中创建一个 .env 文件，并在其中定义各种环境变量。例如，你可以创建一个名为 .env.development 的文件，并在其中定义如下环境变量：

VUE_APP_BASE_URL=http://localhost:8080
VUE_APP_API_KEY=1234567890

然后，你可以在项目的 package.json 文件中添加以下脚本：

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

这样，当你运行 npm run dev 命令时，cross-env 会自动设置 NODE_ENV 环境变量为 development，并加载 .env.development 文件中的环境变量。当你运行 npm run build 命令时，cross-env 会自动设置 NODE_ENV 环境变量为 production，并加载 .env.production 文件中的环境变量。

源码解析

为了更好地理解 cross-env 是如何工作的，我们来看一下 cross-env 的源码。cross-env 的源码非常简单，只有几十行代码。

#!/usr/bin/env node

const childProcess = require('child_process');
const path = require('path');

const args = process.argv.slice(2);
const env = Object.assign({}, process.env);

args.forEach((arg) => {
  const parts = arg.split('=');
  env[parts[0]] = parts[1];
});

childProcess.execSync('cross-env', { env });