Как в Quasar можно использовать файлы .env?

Question

[postya]

Приложение с использованием Quasar.
Мне в axios, там где url нужно использовать url из файла .env
Как это можно сделать?
Привидите пожалуйста пример

Вот что я попытался сделать:

установил пакет quasar-dotenv

Создал файл .env и добавил в него
BACKEND_API_CARS_URL=http://localhost:8050/api/

Создал файл .env.example и доабвил в него
BACKEND_API_CARS_URL=http://localhost:8050/api/

В файле quasar.conf.js Добавил и использовал расширение quasar-dotenv

const env = require('quasar-dotenv').config()

build: {
env: env,
}

Во vuex использовал переменную из .env файла вот так:

const actions = {
  async GET_ALL_CARS_FROM_API({commit}) {
    let result = await axios.get(`${process.env.BACKEND_API_CARS_URL}cars`);
    commit("SET_CARS", result.data)
  }
}

Comments

[Сергей delphinpro]

У меня тоже какая-то шняга с окружением.
Я использую пакет @quasar/quasar-app-extension-dotenv
Переменные подхватываются, только после редактирования конфига.
Т.е. запускаю дев-сервер, переменные не подхвачены. После запуска меняю что-то в конфиге, переменные окружения обновляются до корректных значений.
Всю голову сломал, что за фигня.

[Сергей delphinpro]

В итоге я забил на использование .env файла для vue.
Заюзал возможности phpStorm — разные конфигурации для запуска команд. В них и указываю окружение.

[postya]

Сергей delphinpro, на скрине у тебя показана одна переменная, а если их несколько в файле .env?

[Сергей delphinpro]

postya, там можно несколько добавлять

Answer 1

[Дархан]

https://github.com/quasarframework/app-extension-dotenv я бы советовал использовать это.
Потом в коде можете вызывать так
process.env.API_BACK_END
Только при каждом изменении ENV надо перезагрузать дев сервер.
Если нужна помощь по quasar, можете спрашивать в телеграм чате. https://t.me/quasar_ru

Comments

[postya]

Спасибо!

Answer 2

[Дмитрий Гололобов]

Все вы делаете верно по сути, кроме одного пункта.
Во vue переменные окружения нужно правильно называть, чтобы они подцепились при сборке.
VUE_APP_BACKEND_API_CARS_URL
Т.е. обязательно добавляйте префикс VUE_APP_
https://cli.vuejs.org/ru/guide/mode-and-env.html#%...

Comments

[postya]

Изменил во vuex на
let result = await axios.get(`${process.env.VUE_APP_BACKEND_API_CARS_URL}cars`);

также в файлах .env и .env.example
изменил на
VUE_APP_BACKEND_API_CARS_URL=localhost:8050/api

Ошибка


Почему-то axios вообще пытается запросить localhost:8000 вместо localhost:8050 как у меня прописано в .env файле

[postya]

Пересобрал проект и теперь ошибка выглядит по-другому:

[Сергей delphinpro]

postya,
Совет не по теме вопроса:

await axios.get(`${process.env.VUE_APP_BACKEND_API_CARS_URL}cars`);

Не пишите так в каждом запросе. Лучше воспользуйтесь опцией baseUrl:

export default ({ Vue, store, router }) => {

  const baseURL = '/api';

  let axiosInstance = Axios.create({
    baseURL,
    timeout         : 0,
    responseType    : 'json',
    responseEncoding: 'utf8',
    headers         : {
      'X-Requested-With': 'XMLHttpRequest',
      'Accept'          : 'application/json',
    },
    validateStatus: status => status < 400,
  });

  let token = localStorage.getItem(LS_KEY_TOKEN);
  if (token) axiosInstance.defaults.headers.common[HTTP_HEADER_AUTHORIZATION] = `Bearer ${token}`;

  Vue.prototype.$axios = axiosInstance;
  Vue.$axios = axiosInstance;

}

[postya]

Сергей delphinpro, спасибо!

Answer 3

[Сергей]

Во второй версии делается просто через quasar.conf.js :
build: {
env: {
API: ctx.dev ? 'https://dev.api.com' : 'https://prod.api.com'
}
}
Не забываем расскомментировать ctx в строке module.exports = configure(function (/* ctx */) {
Соответственно, в коде используем process.env.API