process.env.NODE_ENV, process.env.BASE_URL, process.env.VUE_APP_* do not work in project template, return 'undefined'

verdantpath commented 2 years ago

Version

4.5.15

Reproduction link

Environment info

  System:
    OS: macOS 10.15.7
    CPU: (8) x64 Intel(R) Core(TM) i7-3820QM CPU @ 2.70GHz
  Binaries:
    Node: 10.18.1 - ~/.nvm/versions/node/v10.18.1/bin/node
    Yarn: Not Found
    npm: 6.13.4 - ~/.nvm/versions/node/v10.18.1/bin/npm
  Browsers:
    Chrome: 98.0.4758.80
    Edge: Not Found
    Firefox: 96.0.3
    Safari: 14.1.2
  npmPackages:
    vue: ^2.5.11 => 2.6.12 
    vue-hot-reload-api:  2.3.4 
    vue-loader: ^13.0.5 => 13.7.3 
    vue-style-loader:  3.1.2 
    vue-template-compiler: ^2.4.4 => 2.6.12 
    vue-template-es2015-compiler:  1.9.1 
  npmGlobalPackages:
    @vue/cli: 4.5.15

Steps to reproduce

Clone the linked repo

Serve the project with "npm run dev"

View the served app in a browser with browser console open

What is expected?

In the console, the "process.env.NODE_ENV" line should be followed by "development" In the console, the "process.env.BASE_URL" line should be followed by "/" In the console, the "process.env.VUE_APP_TEST" line should be followed by "working"

What is actually happening?

In the console, the "process.env.NODE_ENV" line is followed by "undefined" In the console, the "process.env.BASE_URL" line is followed by "undefined" In the console, the "process.env.NODE_ENV" line is followed by "undefined"

Hello, I'm not sure where this project template originated, probably from a tutorial I had worked on recently. The version is a little older, Vue 2.5.11, and I'm not sure if that has something to do with it.

I spent a few hours trying to search for an answer, someone at some point mentioned that some older versions of Vue use a config/dev.env.js file, instead of .env in the root of the project. This project has the .env file in the root folder. Another hint I found when searching was to create this file using "touch" in the command line, so that is how I created this. I also did restart the dev server after making edits to the .env file, but none of the other process.env.* commands are working here either. So it seems really strange.

Not sure if it matters but my @vue/cli version is 4.5.15

If I create a brand new project using the cli, these all work as expected, so I can't figure out why this doesn't. A little extra background, I had used this original project template for a portfolio project which is getting close to being done when I discovered this strange bug and wondering if I can resolve it. If not I may have an idea for a workaround. If that doesn't work, I guess I'd need to refactor in a new project setup but would rather not spend the add'l time on that right now.

lorand-horvath commented 2 years ago

I'd recreate a new project with @vue/cli 4.5.15 and use the /src files in it. If your existing project has Vue 2.5.11... well that's very old (2017-ish) and most probably has some old package which expects some even older Node.js version... so it's not worth the hassle. Problem is, you'll get a lot of "security" errors with the latest @vue/cli 4.5.15, but that's to be expected, the project has been abandoned, but at least it works. Perhaps you would like to try the newer @vue/cli 5.0.0-rc2 - it's not that bad. Hope this helps!

verdantpath commented 2 years ago

I'd recreate a new project with @vue/cli 4.5.15 and use the /src files in it. If your existing project has Vue 2.5.11... well that's very old (2017-ish) and most probably has some old package which expects some even older Node.js version... so it's not worth the hassle. Problem is, you'll get a lot of "security" errors with the latest @vue/cli 4.5.15, but that's to be expected, the project has been abandoned, but at least it works. Perhaps you would like to try the newer @vue/cli 5.0.0-rc2 - it's not that bad. Hope this helps!

Thank you! I might just go ahead with your suggestions

vuejs / vue-cli