带有Vite React-ts和Vercel的环境变量

Question

我正在使用React-ts模板的vitjs，我想使用环境变量在Vercel中进行部署，在本地我使用' import.meta.env. vite_xxx ';它与我的文件。env一起工作，但是当应用程序部署在Vercel中它不起作用(我在Vercel配置中声明了环境变量)，请遵循在我的代码中使用环境变量的示例。

const urlApi = import.meta.env.VITE_VERCEL_XXX

当我在localhost中运行时，值等于我的。env文件当我在Vercel中运行时，值是undefined

我阅读了vite和vercel的文档，但没有找到解决方案

我期待另一个解决方案或一个方向来解决这个问题

Answer 1

我想知道你为local设置了什么值。在我的例子中，路径被设置为root，即localhost:3000。该路径默认从节点env开始自动设置。如果我将应用程序部署到服务器，并且地址不再是根(即"google.com/")，而是在其他一些嵌套文件夹中，我必须设置"PUBLIC_URL"例如，在.env中，整个服务器地址指向应用程序的根目录。"https://www.server.com/app/dev/".

1. 我使用一个自定义的.env文件来设置PUBLIC_URL.env.develop

VITE_VERSION=dev
PUBLIC_URL=https://server.com/myproject/develop/stats/app/

2. 还需要在vite.config.ts中设置基础url在配置中，这是"基"。地产

export default defineConfig({
envDir: './buildConfig/environments',
plugins: [react()],
base: process.env.PUBLIC_URL,
build: { outDir: process.env.BUILD_PATH },
});

3. 另外，是否有可能构建没有读取正确的.env文件?如果我已经创建了我自己的文件，我使用envDir定义它的路径，见上文。在构建过程中，我在脚本中定义了mode参数。例如，要用。env.develop文件构建一个开发环境，它将是vite --mode develop build. vite，然后将使用这个。env.
。

希望至少有些事情会导致成功

Answer 2

在你的Vercel项目设置中，你必须添加与你的。env文件完全相同的值:

<<p>键/strong>: VITE_YOUR-KEY

: yourApiKey然后检查您希望使用变量的环境(Production),开发和/或)

Answer 3

环境文件需要在应用程序文件夹中，在项目的根目录中它不起作用，我在github https://github.com/hanspoo/vite-env-react-demo中有这个例子。