Env files are used to store credentials such as API keys, Firebase Credentials. An environment variable supports storing the API link at one location so that we do not need to change the Link in each file manually.

Environment variables is used to create clean and well-organized code with separating configuration from application logic, which yielding a codebase that's easier to maintain, read and debug.

Where should .env file go in the project?

-: Open the project root directory and create a .env file inside that directory.

How can use .env files?

Default we have set fake-backend authentication in this template. You can simply change to firebase or fakebackend by changing in .env file.
Fake-backend : VUE_APP_DEFAULT_AUTH=fakebackend

To setup firebase authentication fill the below details in the .env file.
Firebase : VUE_APP_DEFAULT_AUTH=firebase

VUE_APP_URL= "YOUR_API"
VUE_APP_I18N_LOCALE=en
VUE_APP_I18N_FALLBACK_LOCALE=en

VUE_APP_DEFAULT_AUTH=firebase                                                  
VUE_APP_APIKEY=
VUE_APP_AUTHDOMAIN=
VUE_APP_DATABASEURL=
VUE_APP_PROJECTId=
VUE_APP_STORAGEBUCKET=
VUE_APP_MESSAGINGSENDERID=
VUE_APP_APPId=
VUE_APP_MEASUREMENTID=
                        

How to create subdirectory build?

-: To create a subdirectory named build, you can specify the desired public URL for your project within the .env file by setting the publicPath. This configuration will effectively generate the build subdirectory for your project. Additionally, the publicPath will provide access to the project from the vue.config.js file.

publicPath: '/skote/vuejs/v-light/'

These environment variables will be defined for you on process.env. The below example for process.env is from src/router/index.js file.

const router = createRouter({
    history: createWebHistory('/skote/vuejs/v-light/'),
    ... // your code here
});