本教程详细阐述了在 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 作为开发依赖：
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 应用程序。