How can .env files be used in Quasar?

Question

Vue.js

Application using Quasar.
To me in axios, where the url is, I need to use the url from the .env file.
How can I do this?
Please provide an example

Here is what I tried to do:

Installed the quasar-dotenv package

Created an .env file and added it
BACKEND_API_CARS_URL=http://localhost:8050/api/

Created an .env.example file and added it
BACKEND_API_CARS_URL=http://localhost:8050/api/

In the quasar.conf.js file Added and used the quasar-dotenv extension

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

build: {
env: env,
}

In vuex I used a variable from the .env file like this:

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

Answer 1

https://github.com/quasarframework/app-extension-dotenv i would suggest using this.
Then in the code you can call it like this
process.env.API_BACK_END
. Only with each change in ENV, you need to restart the dev server.
If you need help with quasar, you can ask in the telegram chat. https://t.me/quasar_ru

Answer 2

Everything you do is essentially correct, except for one point.
In vue, environment variables need to be named correctly so that they are picked up when building.
VUE_APP_BACKEND_API_CARS_URL
_ be sure to add VUE_APP_ prefix
https://cli.vuejs.org/ru/guide/mode-and-env.html#%...

Answer 3

In the second version, it is done simply through quasar.conf.js :
build: {
env: {
API: ctx.dev ? ' https://dev.api.com ' : ' https://prod.api.com '
}
}
Do not forget to uncomment ctx in the line module.exports = configure(function (/* ctx */)
use process.env.API