Vite + Vue and DotEnv

1

Hi,

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.

2

Check Vite docs about it Env Variables and Modes | Vite

3

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

4

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

Example;: import.meta.env.VITE_API_HOSTNAME

5

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_BACKEND_PORT = 5000
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;
console.log(backendPort)
console.log(mapKey)
</script>
<template>
{{backendPort}} {{mapKey}}
</template>