vite is a handy tools that provide many advantage, im very happy developing vue project with vite, thanks to Evan You.
lets get started,
lets make some .env files first in the root project and insert some key SOME_VARIABLE = value, now how to access it?
Vite exposes env variables on the special
import.meta.envobject.
as vite documentation said, we can access the env variable using import.meta.env so we access with import.meta.env.SOME_VARIABLE, lets do some console log
console.log(import.meta.env.SOME_VARIABLE) //undefined, why it undefined?
To prevent accidentally leaking env variables to the client, only variables prefixed with VITE_ are exposed to your Vite-processed code
vite only showing the variable with prefix VITE_, its very nice to prevent leaked data to client, so change your key to VITE_SOME_VARIABLE, now it can be viewed
vite also support mode, if you change your .env file into .env.development that file only used in development mode
and if you change to .env.production it only used in production mode.
thats all i know about using .env in vite, further reading https://vitejs.dev/guide/env-and-mode.html
Thanks for reading.
Top comments (0)