Vue.js 是一个流行的 JavaScript 框架，被广泛应用于前端开发。在 Vue.js 项目中，我们经常需要配置一些环境变量来实现不同环境的差异化配置和参数设置。本文将介绍如何在 Vue.js 项目中配置环境变量，并提供一些实用的技巧和最佳实践。

什么是环境变量

环境变量是操作系统或软件中可以配置的一些参数或键值对，它们定义了在不同环境下程序的行为、配置和特性。在 Vue.js 项目中，可以使用环境变量来区分开发环境和生产环境，并设置相应的参数。

配置环境变量

在 Vue.js 项目中，可以使用 .env 文件来配置环境变量。.env 文件是一个纯文本文件，用于定义环境变量的键值对。Vue CLI 默认会加载以下几个文件（按照优先级由高到低）：

• .env.local
• .env.[mode]
• .env

其中，.env 是所有环境通用的变量，.env.[mode] 是指定模式下的变量，.env.local 是本地特定的变量（会被 .gitignore 忽略，不会被版本控制）。为了方便管理和配置不同环境下的变量，可以在项目根目录下创建这些文件，并设置不同的环境变量。

假设我们有一个 .env.development 文件，用于配置开发环境下的变量，其内容如下：

VUE_APP_API_URL=http://localhost:8080/api

在 Vue.js 项目中，可以通过 process.env 获取环境变量的值。在上述例子中，我们可以在代码中使用 process.env.VUE_APP_API_URL 访问该环境变量的值。这样一来，我们就可以在开发环境下使用 http://localhost:8080/api，而在其他环境中使用不同的值。

使用环境变量

在 Vue.js 项目中，使用环境变量有以下几种常见的场景和方式。

替换配置文件

可以使用环境变量来替换配置文件中的值。假设我们的应用需要连接一个数据库，数据库的地址和密码在配置文件中：

// config.js
export default {
  dbUrl: 'mongodb://localhost/myapp',
  dbPassword: 'password',
};

我们可以将这些敏感信息放入环境变量中，并在配置文件中引用：

// config.js
export default {
  dbUrl: process.env.VUE_APP_DB_URL,
  dbPassword: process.env.VUE_APP_DB_PASSWORD,
};

这样一来，我们可以根据不同环境的需求，在 .env.[mode] 文件中分别设置不同的变量值。

区分开发和生产环境

在开发过程中，可能需要与开发服务器进行交互，而在生产环境中则需要与正式服务器进行交互。为了方便开发和调试，可以在环境变量中设定 API 的 URL。在不同环境下编写代码时，只需通过 process.env.VUE_APP_API_URL 获取相应的 URL 即可。

设置全局 API 根路径

在前后端分离的项目中，前端需要与后端 API 进行通信。为了避免在代码的每个请求中写入完整的 API 路径，可以将根路径存储在环境变量中，并在项目中使用此变量。例如，我们可以将 API 路径存储在 VUE_APP_API_URL 环境变量中，然后在每个请求中使用 process.env.VUE_APP_API_URL 拼接实际的 API URL。

结语

在 Vue.js 项目中配置环境变量是一种灵活和便捷的方式，可以实现不同环境的差异化配置和参数设置。通过 .env 文件设置环境变量，并在代码中使用 process.env 获取变量值，可以轻松地管理和调整不同环境下的配置。上述提到的一些常见使用场景仅仅是冰山一角，实际应用中还有更多可能，可以根据实际需求进行灵活运用。

希望本文对你理解和配置 Vue.js 项目中的环境变量有所帮助，祝你编写出优秀的 Vue.js 应用！

参考资料：

• Vue CLI 环境变量和模式
• Vue CLI 环境变量和模式 – .env 文件
• Understanding .env Files in Vue.js

本文来自极简博客，作者：心灵的迷宫，转载请注明原文链接：VUE 配置环境变量