vite.config.js 中如何读取 .env 文件中的环境变量

读取 .env 中定义的环境变量的方法

首先需要说明的是：使用 process.env.xxx 这种方式是行不通的。根据官方文档的说明，vite 不会主动加载 .env 文件。但是 vite 提供了 loadEnv 方法，使用该方法我们就可以读取 .env 中定义的环境变量了。

假设 .env 文件中定义了一个 VITE_API_BASE 变量用于指定 api 接口地址，以下代码展示了如何读取该变量：

import { defineConfig, loadEnv } from 'vite'
const path = require('path')

export default defineConfig(({ mode, command }) => {
  const env = loadEnv(mode, process.cwd())
  return {
    server: {
      port: 5174,
      proxy: {
        "/xx/api": {
          target: `${env.VITE_API_BASE}/`,
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/some-api\/api/, "/api"),
        },
      },
    },
  }
})

为什么需要在 .env 中配置环境变量

api 接口地址一般都是后台同学提供的，前端同学拿到接口地址后直接改 vite.config.js 不就好了，有什么必要非要在 .env 中配置，然后再去修改 .env 中的配置呢？

我们知道 .env 和 vite.config.js 都需要提交到版本控制系统中。如果仅仅是为了临时的调试，不是最终的配置，那么是不应该提交到版本控制系统中的。这也简单，有人就要说了，我先修改了，然后再撤销就是了。

这种方式不好的地方就在于你可能一不小心就提交了本不应该提交的东西。最好的做法是增加一个 .env.local 文件，在 .env.local 文件中修改 VITE_API_BASE 变量的值。.env.local 默认就在 .gitignore 中，因此不会被提交。