Not being able to read variables from .env

[pluus]

Version

3.9.3

Environment info

 System:
    OS: macOS 10.14.5
    CPU: (4) x64 Intel(R) Core(TM) i5-5257U CPU @ 2.70GHz
  Binaries:
    Node: 8.16.0 - /usr/local/opt/node@8/bin/node
    Yarn: Not Found
    npm: 6.4.1 - /usr/local/opt/node@8/bin/npm
  Browsers:
    Chrome: 76.0.3809.100
    Firefox: 68.0
    Safari: 12.1.1
  npmPackages:
    babel-helper-vue-jsx-merge-props: ^2.0.3 => 2.0.3
    babel-plugin-jsx-vue-functional:  2.1.0
    babel-plugin-transform-vue-jsx: ^3.5.0 => 3.7.0
    babel-preset-vue:  1.2.1
    babel-preset-vue-app:  1.3.2
    eslint-plugin-vue: ^4.0.0 => 4.7.1
    jest-serializer-vue: ^0.3.0 => 0.3.0
    vue: ^2.5.2 => 2.6.10
    vue-apexcharts: ^1.4.0 => 1.4.0
    vue-eslint-parser:  2.0.3
    vue-hot-reload-api:  2.3.3
    vue-jest: ^1.0.2 => 1.4.0
    vue-loader: ^13.3.0 => 13.7.3
    vue-router: ^3.0.1 => 3.0.7
    vue-style-loader: ^3.0.1 => 3.1.2
    vue-template-compiler: ^2.5.2 => 2.6.10
    vue-template-es2015-compiler:  1.9.1
  npmGlobalPackages:
    @vue/cli: 3.9.3

Steps to reproduce

In the root folder, I've created .env and added the following variable:

VUE_APP_SECRET=secret

In the main.js, i tried reading the variable by:

console.log(process.env.VUE_APP_SECRET) // I thought this would work but not.
console.log(process.env.SECRET) // tried this as well but still no luck.

before new Vue(.....) but all i'm getting are undefined. What am I missing?

What is expected?

displaying 'secret' in the console

What is actually happening?

Getting undefined

[pluus]

Alternative options to use config/dev.env.js file and keep all the variables and values there... but I'm not sure if this is a good practice because these config files are tracked in the git repository. Should I add these file to .gitignore?

Thanks.

[haoqunjiang]

Thanks for submitting this issue! Due to our limited time, we ask you to include a reproduction link to a minimal full reproduction of your problem (for example in a GitHub repository) so we can find what is causing the issue. Thank you for your understanding!

[vue-bot]

Hello!
This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues requiring feedback after 20 days of inactivity. It’s been at least 10 days since the last update here. If we missed this issue or if you want to keep it open, please reply here. (A maintainer can also add the label not stale to keep this issue open.)

Thanks for being a part of the Vue community! 💪💚️

[GiantZOC]

Here is a basic reproduction of the issue: https://github.com/GiantZOC/vue-cli-environment-reproduction

I created a new project with vue-cli, added a .env file and then tried to output the value in the console with main.js.

[haoqunjiang]

@GiantZOC See https://cli.vuejs.org/guide/mode-and-env.html#environment-variables

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

[pluus]

Does that mean there's no way for us to access .env file during development? It would be annoying to keep building the bundle and testing

[haoqunjiang]

What do you mean by "no way to access .env file"? You can access environment variables during development, they just need to start with VUE_APP_ if meant to be used on the client-side. (Those do not have a VUE_APP_ prefix can still be accessed in the config file)

[haoqunjiang]

The reasoning for this design: facebook/create-react-app#865 (comment)

[haoqunjiang]

@pluus I just realized that the project you referenced in the original issue was not scaffolded by vue create. If you are using vue init webpack project-name for scaffolding, please refer to https://github.com/vuejs-templates/webpack for documentation.

[pluus]

Thanks I will give it a shot!