typescript - Hur kan jag använda dotenv med vite/petite vue?

Hur kan jag använda .env-variabler i ett petite-vue-projekt? När jag kör yarn vite får jag felet: process är inte definierad

Filstrukturen är denna:

Root
|_index.html
|_vue-index.ts

Jag har importerat vue-skriptet i index.html och med något som console.log('Hello') kopplat till en knapp fungerar det bra, så det är inget problem med att importera skriptet. Men när jag försöker console.log(process.env.URL) får jag det felet och @click gör ingenting.

.env
URL=http://example.com

// vue-index.ts
import { createApp } from 'petite-vue';
import 'dotenv/config';

createApp({
  print() {
   console.log(process.env.API_URL);
  },
}).mount('#app');

Problemen verkar vara i import.meta.env.-saker av vite. Mitt problem var att med TS är dessa saker inte tillåtna utan att ändra tsconfig.json modulalternativ till esnext eller annat.

Någon som kan förklara för mig hur man använder det? Om jag kör detta med ts-node fungerar det korrekt.

import 'dotenv/config'

console.log(processs.env.API_URL)

Svar #1

1- Skapa en .env-fil i din hemkatalog. Den är inte i /src-mappen.

2- Endast nycklar som börjar med VITE_ kan nås i .env-filen från Vite + Vue 3.

Exempel på .env-filinnehåll

VITE_BACKEND_PORT = 5000
VITE_MAP_KEY = eae5454ii5557772142
BACKEND_PORT = itIsInaccessible

Exempel på användning i App.vue-filen

<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>

Svar #2

För den som kommer hit och vill lösa problemet har jag upptäckt att det enklaste sättet att göra det är med detta tillägg.

Lägg bara till dessa få rader i vite.config.*

// vite.config.ts
import EnvironmentPlugin from 'vite-plugin-environment'; // Here we import the plugin that expose env variable when vite bundle up the app

const config = {
  root: './src',

  // Here you can define which env to expose with prefix params
  // i.e.: EnvironmentPlugin('all', {prefix: 'test'}) => test_env_var == true, env_var == false
  plugins: [EnvironmentPlugin('all', {prefix: ''})], 
};

export default config;

Relaterade artiklar