How to use machine environment variables

[nicostubi]

Hello,

I'm new to vue and I can't get environment variables to work. With this code in my main.js :

import { createApp } from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'
import store from './store'
import './css/menuStyles.css';
import 'ant-design-vue/dist/reset.css';
import './style.css'
import { createEarthoOne } from '@eartho/one-client-vue';

const app = createApp(App);

app.use(
  createEarthoOne({
    clientId: process.env.VUE_APP_EARTHO_CLIENT_ID,
  })
);

console.log("vue start VUE_APP_EARTHO_CLIENT_ID");
console.log(process.env.VUE_APP_EARTHO_CLIENT_ID);

console.log("vue start NODE_ENV");
console.log(process.env.NODE_ENV);

app.use(store).use(router).mount('#app');

the NODE_ENV works but the other one is undefined. When I printenv from my server, VUE_APP_EARTHO_CLIENT_ID is well defined. Should I do something else?

I have reproduced the problem locally: a .env file is working fine, but when putting an environment variable on my OS it does not work anymore.

[Yordan-Ramchev]

@nicostubi What bundler do you use (is it vite)? If it's webpack - process.env. should work.

If you are using vite, you should use import.meta.env instead of process.env
Reference: https://vitejs.dev/guide/env-and-mode