Vue.js 应用中灵活配置环境变量：.env 文件与命令行参数详解

本教程详细阐述了在 vue.js 应用中动态配置后端 api 地址等参数的两种主要方法。首先，推荐使用 `.env` 文件来管理不同环境下的环境变量，确保配置的清晰与隔离。其次，介绍了如何借助 `cross-env` 工具通过命令行参数动态设置环境变量，适用于特定部署场景或临时调试。文章提供了具体代码示例和注意事项，帮助开发者构建更灵活、易于维护的 vue.js 应用。

在开发 Vue.js 应用时，尤其当其需要与后端服务进行通信时，我们经常会遇到需要动态配置后端 API 地址、端口或其他环境参数的需求。直接在代码中硬编码这些值（例如 axios.defaults.baseURL ='http://localhost:1234/'）会降低应用的灵活性，难以适应开发、测试、生产等不同环境。本文将介绍两种主流且推荐的方法来解决这一问题：使用 .env 文件进行环境变量管理，以及通过命令行参数动态注入变量。

一、使用 .env 文件管理环境变量（推荐）

.env 文件是管理环境变量最常用且推荐的方式。它允许你为不同的部署环境（如开发、测试、生产）定义不同的变量，并在应用构建时注入到代码中。

1. 创建 .env 文件

在 Vue.js 项目的根目录下创建 .env 文件。如果你的项目使用 Vite 作为构建工具（Vue 3 默认），则环境变量需要以 VITE_ 开头才能被客户端代码访问。如果使用 Vue CLI，则需要以 VUE_APP_ 开头。

示例 .env 文件内容：

立即学习“前端免费学习笔记（深入）”；

# .env
VITE_API_HOST=localhost
VITE_API_PORT=1234

你也可以创建特定环境的 .env 文件，例如：

• .env.development：开发环境
• .env.production：生产环境
• .env.staging：预发布环境

当运行 npm run dev 或 npm run build 时，构建工具会根据当前运行模式自动加载对应的 .env 文件。例如，npm run dev 会加载 .env.development（如果存在），否则加载 .env。

2. 在 Vue.js 代码中访问环境变量

在你的 Vue.js 应用中，可以通过 process.env.你的变量名 来访问这些环境变量。对于 Vite 项目，更现代的访问方式是 import.meta.env.你的变量名，但 process.env 在许多情况下也兼容。

示例代码：

// main.js 或其他需要配置 axios 的文件
import axios from 'axios';

// 从环境变量中获取 API 主机和端口
const apiHostIp = process.env.VITE_API_HOST;
const apiHostPort = process.env.VITE_API_PORT;

// 构建 baseURL
axios.defaults.baseURL = `http://${apiHostIp}:${apiHostPort}/`;

// 或者使用 import.meta.env (Vite 推荐)
// const apiHostIp = import.meta.env.VITE_API_HOST;
// const apiHostPort = import.meta.env.VITE_API_PORT;
// axios.defaults.baseURL = `http://${apiHostIp}:${apiHostPort}/`;

console.log('API Base URL:', axios.defaults.baseURL);

3. 注意事项

• 变量前缀： 务必使用 VITE_ (Vite) 或 VUE_APP_ (Vue CLI) 作为环境变量的前缀，这样它们才能被客户端 JavaScript 代码访问。不带前缀的变量默认只在 Node.js 环境中可用。
• 版本控制： .env 文件通常不应提交到版本控制系统（如 Git），因为它们可能包含敏感信息或特定于开发者的配置。在 .gitignore 文件中添加 .env 是一个好习惯。
• 部署平台： 在 Netlify, Vercel, Docker 等部署平台上，通常可以直接在平台界面或 Dockerfile 中配置环境变量，这些变量会覆盖 .env 文件中的同名变量。

二、通过命令行参数设置环境变量

在某些特定场景下，例如 CI/CD 流程中需要临时覆盖某些变量，或者在不同操作系统下确保环境变量设置的兼容性时，通过命令行参数直接注入环境变量会非常有用。为了实现跨平台的兼容性，我们通常会使用 cross-env 库。

1. 安装 cross-env

首先，在你的项目中安装 cross-env 作为开发依赖：

百度智能云·曦灵

百度旗下的AI数字人平台

83

查看详情

npm install --save-dev cross-env
# 或者 yarn add -D cross-env

2. 修改 package.json 中的脚本

安装 cross-env 后，你可以修改 package.json 中的 scripts 部分，将环境变量的设置与你的启动命令结合起来。

假设你的 package.json 脚本如下：

// package.json
{
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  }
}

现在，你可以通过 cross-env 在 dev 脚本中设置环境变量：

// package.json
{
  "scripts": {
    "dev": "cross-env VITE_API_HOST=127.0.0.1 VITE_API_PORT=5000 vite",
    "build": "vite build"
  }
}

执行此脚本：

npm run dev

此时，VITE_API_HOST 和 VITE_API_PORT 将被设置为指定的值，并在你的 Vue.js 应用中通过 process.env.VITE_API_HOST 或 import.meta.env.VITE_API_HOST 访问。

如果你想在命令行中动态传入这些值，而不是硬编码在 package.json 中，可以在执行命令时直接设置：

cross-env VITE_API_HOST=backend.example.com VITE_API_PORT=8080 npm run dev

或者，如果你的 package.json 脚本只包含 vite，你可以在执行 npm run dev 时通过 cross-env 预设环境变量：

# 假设 package.json 中 "dev": "vite"
cross-env VITE_API_HOST=myhost VITE_API_PORT=9000 npm run dev

3. 在 Vue.js 代码中访问变量

访问这些通过命令行设置的变量的方式与 .env 文件中的变量完全相同：

// main.js
const apiHostIp = process.env.VITE_API_HOST;
const apiHostPort = process.env.VITE_API_PORT;

axios.defaults.baseURL = `http://${apiHostIp}:${apiHostPort}/`;

4. 注意事项

• 跨平台兼容性： cross-env 的主要作用是确保环境变量的设置在 Windows、macOS 和 Linux 等不同操作系统上都能正常工作。
• 优先级： 通过命令行直接设置的环境变量通常会优先于 .env 文件中定义的同名变量。
• 临时性： 命令行参数设置的环境变量是临时的，只在当前命令执行期间有效。

总结

在 Vue.js 应用中灵活配置参数是构建健壮应用的关键。

• .env 文件是管理环境变量的首选方法，它提供了清晰的配置分离，并能根据不同的环境自动加载。适用于大部分开发和部署场景。
• cross-env 配合命令行参数则为特定场景（如 CI/CD、临时测试或需要动态覆盖配置）提供了强大的灵活性，确保了跨平台的兼容性。

无论选择哪种方式，请始终确保敏感信息（如 API 密钥）不被直接提交到代码仓库，并利用环境变量进行安全管理。通过合理运用这些方法，你可以构建出更加灵活、易于维护和部署的 Vue.js 应用程序。

以上就是Vue.js 应用中灵活配置环境变量：.env 文件与命令行参数详解的详细内容，更多请关注php中文网其它相关文章！