Environment Variables not passed to vue.js

[asawatzki]

I'm trying to use environment variables in vue.js in docker production mode. The container knows about the variables, process.env.VUE_APP_MY_VAR in vue.js does not.

What have I done:

• install dotenv-webpack npm install --save dotenv-webpack
• add dotenv plugin to webpack:

  # webpack.config.js
  ...
  const Dotenv = require('dotenv-webpack');
  ...
  plugins: [
  new Dotenv(),
  ...
  ],
  ...

• add .env file:

  # .env
  VUE_APP_MY_VAR=1.0

• use variable in vue:

  
  <template>
  <h1>Version {{ version }}</h1>
  </template>

- build and run docker: `docker build -t myapp:latest . && docker run -it -d --rm -p 8080:80 --name myapp myapp:latest`

Behavior:
App starts as usual but the content of VUE_APP_MY_VAR is not displayed.
docker exec -it myapp echo $VUE_APP_MY_VAR shows the expexted value.

Expectation:
App should also show the value of VUE_APP_MY_VAR.

What am I missing? Do you have some adivice?

[asawatzki]

I solved this!

For others with similar problems: remove the .env entry in .dockerignore.