如何在 vite.config.js 中使用 vite-env 变量？

在使用 Vite 构建工具时，环境变量可以帮助你在不同的环境（例如开发、测试和生产）下配置应用。在 vite.config.js 文件中使用环境变量可以让你根据不同环境灵活地调整配置。

步骤 1: 创建环境变量文件

首先，你需要在项目的根目录下创建环境变量文件。Vite 默认支持 .env 文件，并且可以为不同环境创建特定的文件，如 .env.development、.env.production 等。

例如，创建 .env.development 文件，并添加以下内容：

plaintext
VITE_API_URL=http://localhost:3000/api
VITE_APP_TITLE=My Vite App - Development

步骤 2: 配置 vite.config.js

在 vite.config.js 文件中，你可以通过 import.meta.env 访问环境变量。这里需要注意的是，Vite 要求环境变量必须以 VITE_ 开头才能在客户端中访问。

javascript
import { defineConfig } from 'vite';

export default defineConfig({
  // 使用环境变量配置不同的基础公共路径
  base: import.meta.env.VITE_APP_BASE_URL || '/',
  // 其他配置...
  server: {
    proxy: {
      '/api': {
        target: import.meta.env.VITE_API_URL,
        changeOrigin: true,
        secure: false,
      }
    }
  }
});

步骤 3: 使用环境变量

在你的应用代码中，你同样可以通过 import.meta.env 获取到这些环境变量。例如，在一个 React 组件中显示应用标题：

javascript
function AppHeader() {
  return <h1>{import.meta.env.VITE_APP_TITLE}</h1>;
}

例子

假设你正在开发一个需要调用后端 API 的应用。在开发环境中，你可能想要指向本地开发服务器，而在生产环境中，你希望指向生产服务器。你可以通过设置不同的环境变量来实现这一点，如下所示：

• .env.development:

  plaintext
  VITE_API_URL=http://localhost:3000/api

• .env.production:

  plaintext
  VITE_API_URL=https://prod.example.com/api

在 vite.config.js 中，根据不同的环境变量配置代理：

javascript
server: {
  proxy: {
    '/api': {
      target: import.meta.env.VITE_API_URL,
      changeOrigin: true,
      secure: false,
    }
  }
}

这样，当你在开发环境下运行应用时，所有 /api 的请求都会被代理到本地开发服务器；而在生产环境下部署时，则会指向生产服务器的 API。

结论

通过这种方式，Vite 允许你灵活地使用环境变量来根据不同的环境调整应用的配置，这是管理大型应用配置的一种非常有效的方法。