Vite + React 中的环境变量未定义

Question

我正在尝试让一些环境变量发挥作用，但对于我的一生来说，我不能...我已经浏览了一些答案，它们似乎都指出了我是如何设置的。

\n

但我总是变得不确定。这就是我测试变量的方式。

\n

import {useState} from \'react\'\nimport {FaCog} from \'react-icons/fa\'\n\nfunction App() {\n  const [data, setData] = useState([])\n  const [dealId, setDealId] = useState(\'\')\n  const [loading, setLoading] = useState(null)\n  const [error, setError] = useState(\'\')\n\n  // Counter\n  const [count, setCounter] = useState(0)\n\n  console.log(\'HOST:\', import.meta.env.HOST) // returns undefined\n

\n

这是我的.env文件，放在根目录下

\n

# .env\nHOST=127.0.0.1:8000\n

\n

为了方便起见，这是我的结构（删除了node_modules）

\n

.\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 .env\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 index.html\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 package-lock.json\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 package.json\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 postcss.config.js\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 src\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 App.jsx\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 favicon.svg\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 index.css\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 logo.svg\n\xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 main.jsx\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 tailwind.config.js\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 vite.config.js\n

\n

我哪里出错了？我已经多次重述了 vite 服务器...我被难住了

\n

Answer 1

VITE_如果要在客户端公开变量，则需要在环境变量名称前添加前缀。
像这样：VITE_HOST在.env文件和代码中。请参阅下面的示例。

# .env
VITE_HOST=127.0.0.1:8000

// .js-file
console.log('HOST:', import.meta.env.VITE_HOST)

有关 Vite 中环境变量的更多信息：https ://vitejs.dev/guide/env-and-mode.html#env-variables