How to use environment variables in Vite
July 5, 2022 ‐ 1 min read
The Vite.js frontend build tool makes use of
.env files at the root of your project in which you may define your environment variables.
Once you make a production build, Vite statically replaces the references to your environment variables by their values.
Compared to other build systems there are two points you need to take into account when referencing your environment variables.
First, you can access your environment via
process.env in Vite may yield the error: "ReferenceError: process is not defined".
Secondly, the user defined environment variables are prefixed with
VITE_. Or another string if you overwrite the default
envPrefix config option.
Thus, given you have the following
You can reference the defined environment variable in your code using the following.
const baseUrl = import.meta.env.VITE_API_BASE_URL