reactjs vite env变量在使用vercel的生产中返回undefined

i5desfxk 于 2023-06-22 发布在 React

关注(0)|答案(2)|浏览(273)

Vite.config.ts

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
});

这是一个.env文件：

VITE_API_KEY = "someKey"
VITE_API_BASE_URL = "baseurl"

我在我的项目中这样使用变量：

const BASE_URL = import.meta.env.VITE_API_BASE_URL;
const key = import.meta.env.VITE_API_KEY;
console.log(BASE_URL , key)

这在我的本地主机上运行良好，但当我在Vercel上部署项目时，应用程序中断，console.log（BASE_URL，key）显示undefined。这是我在Vite上的第一个项目，我已经探索了一些类似的问题，但没有解决我的问题

reactjs

来源：https://stackoverflow.com/questions/75559927/vite-env-variable-returns-undefined-in-production-with-vercel

2条答案

按热度按时间

du7egjpx1#

我的解决方案是在vite的definedConfig函数中定义它们。config.ts文件类似于

export default defineConfig({
  plugins: [react()],
  define: {
    "process.env": process.env,
    ENV_KEY: process.env.ENV_KEY,
  },
});

我现在可以用它

someObj: {
  key: import.meta.env.ENV_KEY,
},

我不完全确定是否有必要在函数中定义process.env

https://vercel.com/docs/frameworks/vite#environment-variables
https://vitejs.dev/config/#using-environment-variables-in-config

赞(0）回复(0）举报 2023-06-22

qcbq4gxm2#

要为Vercel部署声明环境变量，请转到Vercel Jmeter 板中项目设置的环境变量页面。从那里你可以为你的env变量输入键/值对，然后点击“添加”将它们添加到项目中。
然后，您可以访问它们，因为您是import.meta.env.VITE_API_KEY
您可以在以下链接的Vercel文档中查看如何设置环境变量：https://vercel.com/docs/concepts/projects/environment-variables

赞(0）回复(0）举报 2023-06-22

我来回答

reactjs vite env变量在使用vercel的生产中返回undefined

2条答案

相关问题

热门标签

最新问答