Vue环境变量配置指南：玩转开发、生产和测试

前端

2023-05-31 13:38:51

在 Vue 应用中活用环境变量：弹性配置，应对多样环境

引言

环境变量是管理应用程序配置值和设置的宝贵工具。在 Vue 应用中，环境变量让我们能够在不同的环境（开发、生产、测试等）中轻松调整参数和选项。本文将深入探讨在 Vue 应用中设置和使用环境变量的方法，并阐述如何在不同环境中灵活运用它们。

设置环境变量

在 Vue 应用中设置环境变量有三种常见方法：

1. 使用 .env 文件

.env 文件是一个纯文本文件，包含键值对的环境变量。例如：

API_URL=https://example.com/api
DB_HOST=localhost
DB_USER=username
DB_PASSWORD=password

要使用 .env 文件，请在 Vue 项目根目录下创建一个名为 .env 的文件，并输入环境变量键值对。在 Vue 应用中，可以使用 process.env 对象访问环境变量：

const API_URL = process.env.API_URL;
const DB_HOST = process.env.DB_HOST;
const DB_USER = process.env.DB_USER;
const DB_PASSWORD = process.env.DB_PASSWORD;

2. 使用 vue.config.js 文件

vue.config.js 文件是一个 JavaScript 文件，允许自定义 Vue 项目的构建过程。在此文件中，可以使用 defineConfig() 函数定义环境变量：

module.exports = defineConfig({
  env: {
    API_URL: 'https://example.com/api',
    DB_HOST: 'localhost',
    DB_USER: 'username',
    DB_PASSWORD: 'password'
  }
});

在 Vue 应用中，仍然可以通过 process.env 对象访问环境变量，使用方法与使用 .env 文件相同。

3. 使用环境变量服务

环境变量服务是专门存储和管理环境变量的在线服务。我们可以使用服务存储和管理 Vue 应用的环境变量。在 Vue 应用中，可以使用服务的 SDK 来访问环境变量：

import dotenv from 'dotenv';

dotenv.config({ path: '/path/to/.env' });

const API_URL = process.env.API_URL;
const DB_HOST = process.env.DB_HOST;
const DB_USER = process.env.DB_USER;
const DB_PASSWORD = process.env.DB_PASSWORD;