在 vue.js 2 中使用环境变量：设置环境变量：通过 Node.js 进程或构建工具（如 webpack）设置。访问环境变量：使用 process.env 对象，例如：const myEnvVar = process.env.MY_ENV_VAR;

如何在 Vue.js 2 中使用环境变量

使用环境变量是管理不同环境（如开发、测试和生产）中配置的一种常见方法。在 Vue.js 2 中，您可以使用 process.env 对象访问环境变量。

如何设置环境变量？

有几种方法可以设置环境变量：

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

• Node.js 进程：使用 process.env 直接设置环境变量，例如：

process.env.MY_ENV_VAR = 'my-value';

登录后复制

• Web 浏览器：使用 webpack 或 vue-cli 等构建工具设置环境变量。

如何在 Vue.js 2 中访问环境变量？

要访问环境变量，请使用 process.env 对象：

const myEnvVar = process.env.MY_ENV_VAR;

登录后复制

示例用法

以下是一些在 Vue.js 2 中使用环境变量的示例：

• 区分开发和生产模式：

if (process.env.NODE_ENV === 'production') {
  // 生产模式代码
} else {
  // 开发模式代码
}

登录后复制

• 配置 API URL：

const apiUrl = process.env.API_URL || 'http://localhost:8080';

登录后复制

• 使用预处理器：

如果您使用的是 Sass 或 Less 等预处理器，您也可以在 CSS 中访问环境变量：

$api-url: process.env('API_URL');

登录后复制

注意：

• 在生产模式下，最好使用构建工具或 webpack 插件来定义环境变量，以提高安全性。
• process.env 对象在服务器端渲染 (SSR) 应用程序中不可用。