巧用 vite.config.js 纵横驰骋不同开发环境

前端

2023-01-07 08:35:29

驾驭 Vite.config.js：灵活应对不同开发环境

概述

Vite.config.js 是 Vite 中一个强大的配置文件，允许开发者根据不同的开发环境定制其项目的构建和行为。通过利用环境变量和客户端代码中的访问，我们可以配置和调整应用程序以满足特定的需求。

了解不同开发环境

开发、测试和生产环境通常需要不同的配置。例如，开发环境可能需要热更新，测试环境可能需要不同的数据库连接，而生产环境可能需要额外的优化。

利用 Process.env.NODE_ENV

process.env.NODE_ENV 环境变量表示当前的开发环境。我们可以利用它来设置不同的配置：

// 根据 NODE_ENV 设置配置
if (process.env.NODE_ENV === 'development') {
  // 开发环境配置
} else if (process.env.NODE_ENV === 'test') {
  // 测试环境配置
} else {
  // 生产环境配置
}

设置环境变量

环境变量允许我们存储配置信息。可以使用 process.env 对象进行设置：

// 设置环境变量
process.env.MY_API_KEY = '123456';

// 使用环境变量
console.log(process.env.MY_API_KEY); // "123456"

在 Vite.config.js 中，我们可以使用 define 方法定义环境变量：

module.exports = {
  define: {
    'process.env.MY_API_KEY': JSON.stringify('123456')
  }
};

在客户端代码中访问配置和环境变量

客户端代码可以使用 import.meta.env 对象访问配置和环境变量：

// 导入配置和环境变量
import { defineConfig } from 'vite';
import { importMeta } from 'es-module-lexer';

// 定义配置和环境变量
const config = defineConfig({
  define: {
    'process.env.MY_API_KEY': JSON.stringify('123456')
  }
});

// 在客户端代码中使用配置和环境变量
console.log(import.meta.env.VITE_APP_MY_API_KEY); // "123456"