Vite中如何访问package.json中的环境变量？

Question

我正在尝试运行此 npm 脚本，该脚本等待来自

env

:

中指定的 url 的响应

同时“cd .. && cd backend && npm run dev”“wait-on -v $API_URL && vite”

如果您认为有更直接的解决方案来“等待”

env

指定的网址

，请告诉我

我尝试了几种不同的解决方案，其中大部分涉及使 vite 与

dotenv

兼容。我不知道这是否是正确的解决方案，并且不确定产品与开发版本是否会出现问题。通过以下设置，我收到一个错误，该错误是从相关 npm 脚本中抛出的：

ValidationError: "resources[0]" is not allowed to be empty

这是我关注这篇文章后的文件：

vite.config.ts：

import { defineConfig, loadEnv } from 'vite'
import react from '@vitejs/plugin-react-swc'
const env = loadEnv(mode, process.cwd(), '');

export default defineConfig(({ command, mode }) => {
  return {
    plugins: [react()],
    test: {
      environment: "jsdom",
      setupFiles: "./tests/setup.ts"
    },
    define: {
      'process.env.API_URL': JSON.stringify(env.API_URL || 'http://localhost:3000'),
    },
  };
})

npm 脚本：

concurrently \"cd .. && cd backend && npm run dev\" \"cross-env API_URL=$API_URL wait-on -v $API_URL && vite\"

Answer 1

为了访问 React+Vite 应用程序中的 .env 文件中的数据，您需要使用

import.meta.env.VITE_YOUR_VARIABLE

。

为了防止意外将环境变量泄漏给客户端，只有前缀为 VITE_ 的变量才会暴露给您的 Vite 处理的代码。

如何举例：

1. 创建 .env 文件。
2. 将

   VITE_SOME_KEY=123

   添加到 .env。
3. 在您的组件中

   console.log(import.meta.env.VITE_SOME_KEY) // "123"

注意，如果没有 VITE_ 前缀，它将无法工作。

有关更多信息，请参阅 vite 文档。