How to organize deployment variables in VueJS?

Question

Vue.js

There is an application that works with the backend via api. In development, the address of the backend is one, and in production it is another.
How to make something like a config file that will not be in the git, in which you can specify your data for each application?
I got into the config folder, there are dev.env.js and prod.env.js files. Wrote there:

module.exports = {
  NODE_ENV: '"production"',
  API_URL: 'http://mysite.ru'
}

Accordingly, for dev I registered one url, and for prod - another.
I try to get it like this:
process.env.API_URL
But the error is - process is not found
Then I import it Ok, there is no error. But the result is empty, an empty string. Registered in the prod config, so generally does not want to assemble with an error
import process from 'process'

ERROR in chunk app [initial]
static/js/[name].[chunkhash].js
Unexpected token (16:71)

Tell me, experts, how to organize it correctly

Answer 1

Get the dotenv package.
In the .env file, you describe the environment variables.
Make a src/config.js file.
This is a module that returns an object with settings, the structure is the same as dev.env.js.
To make application settings available from anywhere, you can package this as a Vue plugin.