Environment variables for Vue application

Hi,

I am deploying SPA Vue.js 2.0 application trough Laravel forge to Digital Ocean. I am figuraing out how to set tup environment variables so that browse can read them trough JS.

I have this line in my config.js that is part of Vue application:

var env = process.env.APP_ENV || 'development'

I have tried to edit Environment file in Forge and added APP_ENV=production but it does not work.

How do I setup up my environment variables for JS to read them?

topvillas

9 years ago

Level 46

Don't! Exposing server stuff on the client is madness. Create an env.js file and import that when you need it.

dewesoft

9 years ago

Level 5

Ahm ok... So this is the part that comes from vue-cli, webpack template vue project:

config.js

var env = process.env.APP_ENV || 'development'

var config = {
  development: require('./development.config'),
  production: require('./production.config'),
  staging: require('./staging.config')
}

module.exports = config[env]

What to do in this case? Just create env.js and import the env variable and replace above code with

config.js after

import env from "env.js"

var env = env || 'development' 
...

Please or to participate in this conversation.