vue-cli-service serve does not set process.env.NODE_ENV, or any environmental variables. "process is not defined".

[DonHartman]

Version

2.9.3

Reproduction link

https://github.com/DonHartman/vue-bug

Steps to reproduce

Clone the linked repo. (or Create a .env file for a new vue project in accordance with https://github.com/vuejs/vue-cli/blob/dev/docs/env.md, and give VUE_APP_TEST a value, then use it in code.)

Serve the project with "npm run serve" (I used powershell, if it makes a difference).

View the served app in a browser with dev tools open, I've included a "debugger;" line above the issue.

What is expected?

According to https://github.com/vuejs/vue-cli/blob/dev/docs/env.md , process.env.VUE_APP_TEST should have the "sample" value .

What is actually happening?

The code that accesses "process" throws the error "process is not defined".

---

The github repo linked has the fully initialized project (the first commit is auto-generated by vue-cli, the second is my minimal changes to recreate the issue). It can likely be reproduced with much less code, but I wanted to emphasize that it is a problem out-of-the-box with vue-cli, so I only made minimal changes to the pre-made project instead of a minimal project.

These are the settings I used to create it:
Run "vue create "
Choose manual settings
Typescript, Router, Vuex, Linkter / Formatter
yes, class style components
yes, babel polyfills
TSLint
Lint on save
In dedicated config files

[LinusBorg]

From the documentation that you linked to:

You can specify env variables by placing the following files in your project root:

Your .env file is in /src, so it's in the wrong place.

[DonHartman]

...thanks.
I swear I tried putting it everywhere (including root), but eventually decided since 'process' was not defined that something higher up had to be the problem. I would have expected the error to be 'process.env doesn't not have a definition for VUE_APP_TEST', if I just had the wrong location for the file.

It's finally working this morning though, so I'm happy.

[evinkuraga]

Getting similar issue. I have a .env in the root directory. When trying to console.log from a component ( console.log(process.env.VUE_APP_TEST), i get an undefined (even though it exists in the .env file).

When console logging process.env , it does actually give me the BASE_URL and NODE_ENV, but those are values that are probably set as defaults somewhere. I have no way to change them or get it to pick up the .env file variables.

[LinusBorg]

This issue is closed.

Either ask for help on forum.vuejs.org or open a new issue.

[RichPC]

For anyone else finding this, if you're using vue-cli-service serve remember to restart the service after adding new variables to your .env files.

[rayfoss]

@RichPC I did... I still get process not defined in the debugger... totally baffled there. Then I tried incognito, which wasn't using the source map by default and to my surprise
process.env.SOCKET_ENDPOINT.includes('localhost') produces Object({"VUE_APP_DEBUG":"true","NODE_ENV":"development","BASE_URL":"/"}).SOCKET_ENDPOINT, every time it's used. Your mileage may vary based on what version of chrome debugger you're on.

[Frayion]

Getting similar issue. I have a .env in the root directory. When trying to console.log from a component ( console.log(process.env.VUE_APP_TEST), i get an undefined (even though it exists in the .env file).

When console logging process.env , it does actually give me the BASE_URL and NODE_ENV, but those are values that are probably set as defaults somewhere. I have no way to change them or get it to pick up the .env file variables.

Same problem as well....

I tried starting from scratch using Vue Cli3 to create a new project and also tried using the vue webpack template. None of them works!
I tried it in root and /src then tried console.log() in main.js other .js and .vue file!

[mouafa]

If someone stumbles in this as I did, it's not vue-cli fault, somehow if you create the file via a text editor (vscode in my case) node fs module can't read it, I couldn't even do cat .env

the solution is to use the terminal, run touch .env in your project root folder, a new .env file will be created and node fs could read it.

The first .env was created with touch .env command, and you could see that it's using the proper icon.
The second one was created from vscode.
I don't know what's the difference, but apparently not all .env are a .env 🙈

happy coding!

[LinusBorg]

I always create my .env files from within vscode, so the problem must be related to your system in some way.

[entioentio]

@mouafa thx, helped in my case
@LinusBorg files created with phpstorm and fs couldn't read them. Tried chowning and chmoddig, didn't help.
But I don't think it's directly related to to vue-cli

[ravindragaikwad]

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

[ArturoBurela]

Getting similar issue. I have a .env in the root directory. When trying to console.log from a component ( console.log(process.env.VUE_APP_TEST), i get an undefined (even though it exists in the .env file).
When console logging process.env , it does actually give me the BASE_URL and NODE_ENV, but those are values that are probably set as defaults somewhere. I have no way to change them or get it to pick up the .env file variables.

Same problem as well....

I tried starting from scratch using Vue Cli3 to create a new project and also tried using the vue webpack template. None of them works!
I tried it in root and /src then tried console.log() in main.js other .js and .vue file!

I have the same problem too! Were you able to solve it?

[mk1novotny]

For me helps not to place process.env.VUE_APP_* directly, but
data() { return { version: process.env.VUE_APP_VERSION } }
then use version variable

[mklueh]

I have the problem in my index.html, where I wanted to set the title via env variable

<title><%= VUE_APP_NAME %></title>

This does not happen when building my docker image with this Dockerfile from https://vuejs.org/v2/cookbook/dockerize-vuejs-app.html

I´ve just added @vue/cli-service-global because it could not finde the vue-cli-service out of the box

FROM node:lts-alpine

# install simple http server for serving static content
RUN npm install -g http-server @vue/cli-service-global

# make the 'app' folder the current working directory
WORKDIR /app

# copy both 'package.json' and 'package-lock.json' (if available)
COPY package*.json ./

# install project dependencies leaving out dev dependencies
RUN npm install

# copy project files and folders to the current working directory (i.e. 'app' folder)
COPY . .

# build app for production with minification
RUN npm run build

EXPOSE 8080
CMD [ "http-server", "dist" ]

[genericengine2018]

guys. i tried all your ways. touch .env, build and serve again.
process always undefined in debug window of chrome ....
nevertheless, the variables now are CORRECTLY interpreted.
that is to say, it works now despite of the error msg 'process is undefined' is still there...

[dingkewen]

i set .env,but process is undefined . why?

[dingkewen]

For me helps not to place process.env.VUE_APP_* directly, but
data() { return { version: process.env.VUE_APP_VERSION } }
then use version variable

oh ,that's true. why?

[hello2parth]

I tried following and it's not working for me.

1) created .env file using touch env in root directory
2) VUE_APP_TITLE=My App (added into env file)
3) Added following into component

data() {
    return {
      title: process.env.VUE_APP_TITLE,
    }
  },
  mounted() {
    console.warn(this.title);
}

4) Restarted vue cli service by npm run serve

Console Result: undefined

[moderaminion]

Same steps like @hello2parth done and same issue. Also if you run with docker-compose and define there environment it will not read the environement variables. This is slowly getting annoying.

[vpistis]

I'm having a similar problem, some var into .env was not visible into js file.
I have solved adding VUE_APP_ to all var names that I want into js code.
I don't know if this is the right solution, but this trick solve my problem.

before: BASE_URL=https://github.com/
after: VUE_APP_BASE_URL=https://github.com/

[MariaIm]

If someone stumbles in this as I did, it's not vue-cli fault, somehow if you create the file via a text editor (vscode in my case) node fs module can't read it, I couldn't even do cat .env

the solution is to use the terminal, run touch .env in your project root folder, a new .env file will be created and node fs could read it.

The first .env was created with touch .env command, and you could see that it's using the proper icon.
The second one was created from vscode.
I don't know what's the difference, but apparently not all .env are a .env 🙈

happy coding!

Your solution WORKED for me

[JLueke]

I'm having a similar problem, some var into .env was not visible into js file.
I have solved adding VUE_APP_ to all var names that I want into js code.
I don't know if this is the right solution, but this trick solve my problem.

before: BASE_URL=https://github.com/
after: VUE_APP_BASE_URL=https://github.com/

Adding VUE_APP_ as prefix worked for me, too.

[stitch]

For me helps not to place process.env.VUE_APP_* directly, but
data() { return { version: process.env.VUE_APP_VERSION } }
then use version variable

This is definitely a must add to the manual. The manual now does not make it clear that these values cannot be used in templates, only in javascript objects. Thank you for figuring this out and sharing it!
https://cli.vuejs.org/guide/mode-and-env.html#example-staging-mode