前端 - vite vue3，.env.development文件里，自定义变量 VITE_API_DOMAIN，获取不到，报错 process is not defined？

Question

vite vue3，.env.development文件里，自定义变量，获取不到，报错 process is not defined

调用 process.env.VITE_API_DOMAIN，报错，process is not defined，请问是哪配置不对吗？

# 环境
NODE_ENV = development

# 域名
VITE_API_DOMAIN = http://47.1.1.149:5005

# 接口前缀
VITE_API_BASEPATH = base

# 打包路径
VITE_BASE_PATH = ''

# 标题
VITE_APP_TITLE = test

Answer 1

试下 import.meta.env

Answer 2

vite已经不支持这么写了, 你可以在vite.config.ts中这么来用

 define: {
    'process.env': {
      VITE_API_DOMAIN: 'http://47.1.1.149:5005'
    }
  }

额，要通过文件的话，得用loadEnv

const env = loadEnv(mode, process.cwd());

stackoverflow中已经有回答了，我就不班门弄斧了
https://stackoverflow.com/questions/66389043/how-can-i-use-vite-env-variables-in-vite-config-js

Answer 3

在 Vite 和 Vue 3 的项目中，环境变量是通过特殊的 .env 文件来管理的，但你不能直接在客户端代码（如 Vue 组件或脚本）中通过 process.env 来访问它们，因为 process 对象在浏览器环境中是不存在的。Vite 在构建过程中会将这些环境变量替换为实际的值，但仅限于特定的前缀（默认为 VITE_）开头的环境变量。

为了在你的 Vue 3 组件或脚本中访问这些环境变量，你应该在 vite.config.js 文件中进行配置，以确保这些环境变量在构建时能被注入到代码中。然而，由于你已经在 .env.development 文件中以 VITE_ 开头定义了你的变量，Vite 应该已经自动处理了它们。

但是，你需要在客户端代码中通过 import.meta.env 来访问这些变量，而不是 process.env。例如：

// 在你的 Vue 组件或脚本中
const apiDomain = import.meta.env.VITE_API_DOMAIN;
const apiBasePath = import.meta.env.VITE_API_BASEPATH;
// ... 其他环境变量

console.log(apiDomain); // 应该输出 "http://47.1.1.149:5005"

如果你确实需要在客户端代码中访问 process.env（尽管在 Vite 中不推荐这样做），你可以使用 @rollup/plugin-replace 或其他类似插件来手动注入这些值，但这通常不是必要的，因为 import.meta.env 提供了更好的方式来访问环境变量。

确保你的 vite.config.js 文件没有配置错误，特别是关于环境变量处理的部分。如果一切正常，但问题仍然存在，请检查你的构建输出或控制台日志，看是否有其他相关的错误或警告信息。