javascript - How to use environment variables in React with vite? - Stack Overflow

admin管理员组

文章数量:1387389

I was trying to access environment variables, at first, I got an error saying process is not defined.

Then I tried this but I'm not sure why it's not working

.env

VITE_BASE_URL="/"
VITE_HOST="jikan1.p.rapidapi"
VITE_KEY="abcdefghij12345678"

Page.jsx

let api = {
  base: import.meta.env.VITE_BASE_URL,
  host: import.meta.env.VITE_HOST,
  key: import.meta.env.VITE_KEY
};

function Uping() {
      

    console.log(api);
    return (
      <div>
      <p>{api.host}</p>
      <p>{api.base}</p>
      <p>{api.key}</p>
    </div>
)
}

I only get api.host but the base and key are undefined

can someone tell me what I'm doing wrong here?

I was trying to access environment variables, at first, I got an error saying process is not defined.

Then I tried this but I'm not sure why it's not working

.env

VITE_BASE_URL="https://jikan1.p.rapidapi./"
VITE_HOST="jikan1.p.rapidapi."
VITE_KEY="abcdefghij12345678"

Page.jsx

let api = {
  base: import.meta.env.VITE_BASE_URL,
  host: import.meta.env.VITE_HOST,
  key: import.meta.env.VITE_KEY
};

function Uping() {
      

    console.log(api);
    return (
      <div>
      <p>{api.host}</p>
      <p>{api.base}</p>
      <p>{api.key}</p>
    </div>
)
}

I only get api.host but the base and key are undefined

can someone tell me what I'm doing wrong here?

• javascript
• reactjs
• environment-variables
• vite

Share Improve this question Follow edited Mar 16, 2022 at 18:15 kissu 47k1616 gold badges9090 silver badges189189 bronze badges asked Mar 16, 2022 at 18:07 DhaifallahDhaifallah 1,86511 gold badge77 silver badges2020 bronze badges 4

• I've removed the vue since it's kinda unrelated here. – kissu Commented Mar 16, 2022 at 18:15
• @kissu I thought it might be, since I used to use env variables without vite but no problem – Dhaifallah Commented Mar 16, 2022 at 18:19
• Vue is a framework. Vite is a build tool like Webpack, it's unrelated to the Vue ecosystem now. – kissu Commented Mar 16, 2022 at 18:22
• @kissu i get it now thanks – Dhaifallah Commented Mar 16, 2022 at 18:26

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

I figured out why it's not working, silly mistake.

it's just because I didn't restart the server there is nothing wrong other than that.

if you don't stop the server and start it again,env file won't be updated.

本文标签： javascriptHow to use environment variables in React with viteStack Overflow