Vue-cli: env variables do not work

[igor-e]

Version

3.4.1

Environment info

Environment Info:

  System:
    OS: macOS High Sierra 10.13.6
    CPU: (8) x64 Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz
  Binaries:
    Node: 11.9.0 - /usr/local/bin/node
    Yarn: 1.13.0 - /usr/local/bin/yarn
    npm: 6.5.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 72.0.3626.121
    Firefox: 64.0.2
    Safari: 12.0.3
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0-beta.2 
    @vue/babel-plugin-transform-vue-jsx:  1.0.0-beta.2 
    @vue/babel-preset-app:  3.4.1 
    @vue/babel-preset-jsx:  1.0.0-beta.2 
    @vue/babel-sugar-functional-vue:  1.0.0-beta.2 
    @vue/babel-sugar-inject-h:  1.0.0-beta.2 
    @vue/babel-sugar-v-model:  1.0.0-beta.2 
    @vue/babel-sugar-v-on:  1.0.0-beta.2 
    @vue/cli-overlay:  3.4.1 
    @vue/cli-plugin-babel: ^3.4.0 => 3.4.1 
    @vue/cli-service: ^3.4.0 => 3.4.1 
    @vue/cli-shared-utils:  3.4.1 
    @vue/component-compiler-utils:  2.6.0 
    @vue/preload-webpack-plugin:  1.1.0 
    @vue/web-component-wrapper:  1.2.0 
    vue: ^2.6.6 => 2.6.8 
    vue-hot-reload-api:  2.3.3 
    vue-loader:  15.7.0 
    vue-router: ^3.0.1 => 3.0.2 
    vue-style-loader:  4.1.2 
    vue-template-compiler: ^2.5.21 => 2.6.8 
    vue-template-es2015-compiler:  1.9.1 
    vuex: ^3.0.1 => 3.1.0 
  npmGlobalPackages:
    @vue/cli: 3.2.1

Steps to reproduce

1. vue create test
   1.1. Manually select features
   1.2. Babel, Router, Vuex, CSS Pre-processors
   1.3 Use history mode for router? Y
   1.4 Pick a CSS pre-processor: Sass/SCSS (with dart-sass)
   1.5 Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
   1.6 Save this as a preset for future projects? N
2. cd test
3. echo 'FOO=bar' > .env
4. Add "console.log('env', JSON.stringify(process.env))" line in src/main.js, so it looks like this:

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

console.log('env', JSON.stringify(process.env))

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

1. in terminal: yarn serve
2. output of console log is: env {"NODE_ENV":"development","BASE_URL":"/"}

What is expected?

console output should contain "FOO":"bar" env variable

What is actually happening?

Seems like .env is not read at all. 'FOO' variable is not defined in process.env

[sodatea]

https://cli.vuejs.org/guide/mode-and-env.html#using-env-variables-in-client-side-code

Only variables that start with VUE_APP_ will be statically embedded into the client bundle with webpack.DefinePlugin.

[igor-e]

Oh, I missed that part! Thank you!

[ben-wong]

My varibales are started with VUE_APP_ but still cannot read them.
The console output is undefined.
Tried restart the program. not working.
Any ideas?

[rsalunga29]

My varibales are started with VUE_APP_ but still cannot read them.
The console output is undefined.
Tried restart the program. not working.
Any ideas?

You should check this https://github.com/vuejs/vue-cli/issues/767#issuecomment-586656860

[igmrrf]

If you have prefixed yours with VUE_APP_
& it's still not accessible probably when serve

Hope you tried accessing it using

process.env.VUE_APP_MY_ENV

and not just

VUE_APP_MY_ENV

[dthomas2063]

I have this problem as well. We are using the following files:
.env
.env.development
.env.development.local

The process.env object only contains the variables in the .env file plus NODE_ENV: "development" and BASE_URL: ""

The strangest thing is that variables from all files are available when built on a Mac, but only the ones from .env are available when built on a Windows machine.

[dzvid]

I was having that problem after changing env variables and not seeing updated values in the app. Solution was to restart development mode to load new env variables values in the app (stop and run yarn serve again).

[jezsung]

If the only environment started with VUE_APP is available, then where should I store my private secret API key? Isn't it dotenv library for storing secret API key?

[pushpesh4u]

To anyone who is still not getting it to work, please make sure your env files (.env, .env.development, .env.development.local, .env.production) have a UTF-8 encoding. My files had a UCS-2 LE BOM encoding and vue was silently ignoring them.

They started working after changing to UTF-8.