如何在Vite配置中定义process.env变量并在客户端脚本中使用？

你的理解方向是对的，但Vite的define配置和import.meta.env的使用有细节规则需要注意，之前的尝试失败是因为配置方式不符合Vite的变量替换逻辑。下面是具体的问题分析和解决方法：

问题原因 #

你之前在vite.config里的define配置是定义了一个全局变量stage，而非注入到import.meta.env对象中，所以客户端脚本里调用import.meta.env.stage会返回undefined，如果直接调用stage反而能拿到值。但这不是Vite/Astro推荐的客户端环境变量使用方式。

正确解决方案 #

方案1：Astro原生客户端环境变量（推荐） #

Astro内置了客户端环境变量的支持，只需给变量加上PUBLIC_前缀，就能自动在客户端脚本中通过import.meta.env访问：

1. 在项目根目录的.env文件中定义变量：

PUBLIC_STAGE=development

2. 客户端脚本中直接调用：

console.log(import.meta.env.PUBLIC_STAGE); // 输出对应环境的值

方案2：通过Vite配置映射process.env到import.meta.env #

如果需要直接从process.env映射变量到客户端的import.meta.env，需要在vite.config中按照Vite的静态替换规则配置define：

// vite.config.mjs
import { defineConfig } from 'vite';

export default defineConfig({
  define: {
    // 键名必须是字符串形式的import.meta.env.XXX，值要JSON.stringify转成字符串
    'import.meta.env.STAGE': JSON.stringify(process.env.NODE_ENV),
  },
});

配置完成后，客户端脚本中即可正常调用：

console.log(import.meta.env.STAGE); // 输出process.env.NODE_ENV的值

补充说明 #

• SSR页面中，服务器端代码可以直接使用process.env，但客户端代码仍需遵循上述规则，因为客户端代码是打包后在浏览器运行的，无法直接访问服务器的环境变量。
• 若需要自定义客户端环境变量的前缀，可以在vite.config中配置envPrefix，比如envPrefix: 'MY_'，这样所有以MY_开头的环境变量都会被暴露到import.meta.env中。

内容的提问来源于stack exchange，提问作者George Katsanos