Vue-cli: New default project - VUE_APP_ environment variables not available in client code

[benc-uk]

Version

3.2.1

Reproduction link

https://github.com/benc-uk/smilr/tree/master/vue

Environment info

  System:
    OS: Linux 4.4 Ubuntu 18.04.1 LTS (Bionic Beaver)
    CPU: (4) x64 Intel(R) Core(TM) i7-6600U CPU @ 2.60GHz
  Binaries:
    Node: 8.14.0 - /usr/bin/node
    Yarn: Not Found
    npm: 6.4.0 - ~/.npm-global/bin/npm
  Browsers:
    Chrome: Not Found
    Firefox: Not Found
  npmPackages:
    @vue/cli-overlay:  3.2.0
    @vue/cli-plugin-eslint: ^3.2.0 => 3.2.1
    @vue/cli-service: ^3.2.0 => 3.2.0
    @vue/cli-shared-utils:  3.2.0
    @vue/component-compiler-utils:  2.3.0
    @vue/preload-webpack-plugin:  1.1.0
    @vue/web-component-wrapper:  1.2.0
    bootstrap-vue: ^2.0.0-rc.11 => 2.0.0-rc.11
    eslint-plugin-vue: ^5.0.0-0 => 5.0.0
    vue: ^2.5.17 => 2.5.18
    vue-eslint-parser:  2.0.3
    vue-functional-data-merge:  2.0.7
    vue-hot-reload-api:  2.3.1
    vue-loader:  15.4.2
    vue-router: ^3.0.1 => 3.0.2
    vue-style-loader:  4.1.2
    vue-template-compiler: ^2.5.17 => 2.5.18
    vue-template-es2015-compiler:  1.6.0
  npmGlobalPackages:
    @vue/cli: 3.2.1

Steps to reproduce

• Create a new Vue project either in the Web UI or with vue create. Take defaults (i.e. babel and eslint as options)
• Create .env.development and/or .env.production in root of project and set variables in there, e.g. VUE_APP_FOO=bar
• Use process.env.VUE_APP_FOO in app code, and variable will be undefined. Inspecting the bundled JS after building shows no evidence of VUE_APP_FOO ever being bundled into the app

What is expected?

Variables to be available via process.env.VUE_APP_FOO as described in the docs here https://cli.vuejs.org/guide/mode-and-env.html

What is actually happening?

Variables are not set

---

I notice my project has no vue.config.js file, I see several references to webpack.DefinePlugin but this has not been setup and without a vue.config.js I have no idea where to start if I wanted to manually fix this

[benc-uk]

I just ran vue inspect in there I can see

    new DefinePlugin(
      {
        'process.env': {
          NODE_ENV: '"development"',
          BASE_URL: '"/"'
        }
      }
    ),

But there is nothing about loading the .env files

[benc-uk]

DOH! I had the .env files inside my src folder, sorry - move along nothing to see here 😊

[ravindragaikwad]

I fixed it by running
npm run build
npm run dev
then it started reading the env values.

[Velua]

Don't know why but repeating @ravindragaikwad steps worked for me too.