Publicada:

Vue 3 + Vite: Acceda a las variables de entorno desde dotenv (.env)

Este es un tutorial rápido sobre cómo crear y acceder a variables de entorno en Vue 3 con un archivo dotenv (.env).

Los aplicaciones de Vue 3 creados con Vite admiten variables de entorno dotenv listas para usar, por lo que todo lo que necesita hacer es agregar un archivo .env a la carpeta raíz de su proyecto de Vue.


Cómo hacer que las variables env sean accesibles para la aplicación cliente de Vue

Solo hay un error: para acceder a las variables de entorno desde la aplicación del cliente, deben tener el prefijo VITE_. De lo contrario, solo serán accesibles desde el lado del servidor.

Puede acceder a las variables de entorno (con el prefijo VITE_) desde su aplicación Vue a través del objeto import.meta.env. Por ejemplo const myVar = import.meta.env.VITE_MY_VAR;.


Ejemplo de variable env Vue 3 + Vite en StackBlitz

Este es un ejemplo de la aplicación Vue 3 + Vite que contiene un par de variables de entorno. Muestra que la variable env con el prefijo VITE_ es accesible para el componente de la aplicación y la variable del lado del servidor no lo es.

(Ver en StackBlitz en https://stackblitz.com/edit/vue-3-vite-access-environment-variables-from-dotenv)

 

Ejemplo de archivo dotenv (.env)

El archivo dotenv de la aplicación de ejemplo. Define dos variables de entorno, la que tiene el prefijo VITE_ es accesible para la aplicación cliente de Vue, y la que no tiene el prefijo solo es accesible para el código del lado del servidor.

# variables prefixed with VITE_ are accessible from the vue client app
VITE_MY_ENV_VARIABLE=environemnt variable value from .env file

# variables without the VITE_ prefix are NOT accessible from the vue client app
SERVER_SIDE_ONLY_VAR=this can't be accessed on the client
 

Componente de la aplicación Vue 3

El componente App intenta mostrar ambas variables de entorno, pero solo tiene acceso a la que tiene el prefijo VITE_.

Accede a variables en el archivo .env con el objeto especial import.meta.env.

<script setup>
const publicEnvVar = import.meta.env.VITE_MY_ENV_VARIABLE;
const privateEnvVar = import.meta.env.SERVER_SIDE_ONLY_VAR;
</script>

<template>
    <div class="card m-3">
        <h5 class="card-header">Vue 3 + Vite - Access Environment Variables from dotenv (.env)</h5>
        <div class="card-body">
            <p>VITE_MY_ENV_VARIABLE: {{publicEnvVar}}</p>
            <p>SERVER_SIDE_ONLY_VAR: {{privateEnvVar}}</p>            
        </div>
    </div>    
</template>
 

Para obtener más información sobre el uso de variables de entorno en una aplicación Vue creada con Vite, consulte https://vitejs.dev/guide/env-and-mode.html.

 


Suscríbete o Sígueme para actualizaciones

Suscríbete a mi canal de YouTube o sígueme en Twitter, Facebook o GitHub para recibir notificaciones cuando publique contenido nuevo.

Aparte de la codificación...

Actualmente estoy intentando viajar por Australia en motocicleta con mi esposa Tina en un par de Royal Enfield Himalayan. Puedes seguir nuestras aventuras en YouTube, Instagram y Facebook.


¿Necesita Ayuda Vue 3?

Buscar fiverr para encontrar ayuda rápidamente de desarrolladores Vue 3 experimentados.