How to use .env files in laravel + vuejs project?

Question

I have laravel(5.8) + vuejs(2.6.10) project in single repo.

Currently, i am using env variables for frontend(vuejs) from .env of laravel using prefix MIX .

context:
https://medium.com/@weehong/laravel-5-7-vue-vue-router-spa-5e07fd591981

But

I need separate .env files for vuejs other than .env of laravel. is it possible? how?

I need make build according to .env files(while not not using Vue-cli)

Answer 1

Laravel already provides this functionality out of the box. For any variables you want exposed to laravel/mix , you just prefix them with MIX_

MIX_HOST=https://example.com

And you can now access it within your Vue application as process.env.MIX_HOST .

Mix will not include any other variables from your .env file if they're not prefixed with MIX_ .

For a more controlled approach, you can use dotenv for this and specify the filename of your .env file you wish to load in your Vue application:

yarn add -D dotnev // npm i dotenv -D

Then in your main js file for your Vue app:

require('dotenv').config({
  path: path.resolve(process.cwd(), '.env-vue')
})

This will pollute the process.env global with any values in this file.