vuejs не загружает переменные окружения

Question

Может быть кто-нибудь сможет подсказать, в чём проблема? Не подсасываются переменные из .env. Файлик лежит в корне проекта. Все переменные выглядят так:

VUE_APP_*=*

В main.js делаю так

console.log(process);

В консоли получаю так:

nextTick: ƒ nextTick(fn)
title: "browser"
execPath: "browser"
arch: "browser"
platform: "browser"
pid: 1
browser: true
env: {}
argv: []
binding: ƒ (name)
cwd: ƒ ()
chdir: ƒ (dir)
uvCounters: ƒ ()
memoryUsage: ƒ ()
uptime: ƒ ()
dlopen: ƒ ()
umask: ƒ ()
kill: ƒ ()
exit: ƒ ()
features: {}
__proto__: Object

Куда можно посмотреть? Из-за чего это может происходить?

Answer 1

Используйте пакет "dotenv" для чтения и дальнейшего доступа к данным из вашего .env файла, можно установить через npm/yarn: "npm/yarn install dotenv" и потом можете использовать, например так и уже из этой переменной получаете нужные значения: const result = dotenv.config() // читает ваш .env файл.

Ссылка на github модуля : https://github.com/motdotla/dotenv . Ссылка на официальную документацию VUE, которая вам также может быть полезна по этой теме: https://cli.vuejs.org/ru/guide/mode-and-env.html#%D1%80%D0%B5%D0%B6%D0%B8%D0%BC%D1%8B-%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%8B

Answer 2

Проблема решилася относительно просто. Когда-то я уже сталкивался с подобного рода эффектами vuejs.

В таком случае, к тому моменту, в x могут находиться уже совсем другие данные. Я предполагаю, что это связано с тем, что console.log(x) буферизирует данные. А к моменту, когда их требуется вывести, по ссылке x, может лежать уже что-то ещё.

Для того, чтобы этого избежать, я явно указал поле объекта, которое требуется посмотреть:

console.log(process.env)

БЛОГ НА HUSL

vuejs не загружает переменные окружения

Ответы (2 шт):