从新手到高手：轻松掌握 Vite 配置环境变量

2023-12-17 23:03:34

前言

Vite 是一个现代化的前端构建工具，以其快速启动、热模块替换和构建优化而闻名。在 Vite 中，您可以使用环境变量来管理应用程序的配置，从而轻松地在不同环境中（例如，开发环境、生产环境）调整应用程序的行为。

如何创建 `.env` 文件

首先，您需要在项目的根目录下创建 .env 文件。.env 文件是一个包含环境变量的简单文本文件，通常以键值对的形式存储。例如，您可以使用以下内容创建一个 .env 文件：

NODE_ENV=development
PORT=3000

上面的 .env 文件包含了两个环境变量：

NODE_ENV：表示当前的运行环境，在本例中是 "development"，表示开发环境。
PORT：表示应用程序监听的端口号，在本例中是 3000。

如何使用环境变量

在 Vite 中，您可以使用 process.env 对象访问环境变量。例如，您可以使用以下代码来访问 NODE_ENV 环境变量：

const environment = process.env.NODE_ENV;

现在，您就可以在代码中使用 environment 变量来判断当前的运行环境。例如，您可以使用以下代码来根据不同的运行环境输出不同的信息：

if (environment === 'development') {
  console.log('当前运行环境为开发环境。');
} else {
  console.log('当前运行环境为生产环境。');
}

如何根据不同环境加载不同的配置文件

在 Vite 中，您还可以根据不同的运行环境加载不同的配置文件。例如，您可以创建一个 .env.development 文件和一个 .env.production 文件，并在不同的环境中加载不同的配置文件。

要根据不同环境加载不同的配置文件，您需要在 Vite 的配置文件 vite.config.js 中进行配置。您可以使用以下代码来根据不同的运行环境加载不同的配置文件：

import { defineConfig } from 'vite';

export default defineConfig(({ mode }) => {
  const config = {
    // ...其他配置
  };

  if (mode === 'development') {
    // 开发环境的配置
    config.plugins = [
      // ...开发环境的插件
    ];
  } else {
    // 生产环境的配置
    config.plugins = [
      // ...生产环境的插件
    ];
  }

  return config;
});