Vite + Vue and DotEnv


How to use dotenv while using F7 v6 and Vite?
I was using F7 v5 and webpack before. And It works fine.
But in Vite, I don’t know how to config it.

Please Help.
Thank you.

Check Vite docs about it Env Variables and Modes | Vite

Thank you. :+1: :+1: :+1:
We can customize the prefix using Configuring Vite | Vite.

use import.meta.env and the env var name should starts with VITE_

Example;: import.meta.env.VITE_API_HOSTNAME

1- Create .env file in your home directory. It is not in the /src folder.

2- Only keys starting with VITE_ can be accessed in the .env file from within Vite + Vue 3.

Example .env file content

VITE_MAP_KEY = eae5454ii5557772142
BACKEND_PORT = itIsInaccessible

Example of using in App.vue file

<script setup>
const backendPort = import.meta.env.VITE_BACKEND_PORT;
const mapKey = import.meta.env.VITE_MAP_KEY;
{{backendPort}} {{mapKey}}