env variables do not work

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.

[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.