Use .env files in vue vite

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.env object.

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.