Is there a way to Hot Reload my Vue Page after changing an Environment Variable in VueJS?

user_11259040 0
Viewed 1988

I want to have different modes for my application, so I created different .env files to store my environment variables. Using these variables works fine, the only problem is that I have to restart the whole application when I change something inside the .env files. I tried outsourcing the environment variables into a .json file to get it working with Hot Reload, which didn't work.

This is my .env file:

NODE_ENV=development
VUE_APP_JSON_FILE=./m.json

My vue.config.js:

const webpack = require("webpack");

module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.DefinePlugin({
        VUE_APP_JSON: JSON.stringify(require(process.env.VUE_APP_JSON_FILE))
      })
    ]
  }

My .json file:

{
  "logo": {
    "picture": "test.jpg",
  }
}

Now I can call the variable inside the .json like VUE_APP_JSON.logo.picture. As I said, all this works, but changing variables in the .env file or the .json file doesn't trigger Hot Reload. Anyone knows how to achieve that? Thanks in advance.

hot-reload vue.js webpack environment-variables json
2 Answers

TL;DR;

No, you can't

from my experience you can't, and you'll never be able to. since .env files are "somewhat" cached (I don't really know what they call that) but once you've compiled your application you can never change the .env then expect a hot-reload

.env variables are statically used in the compiled code itself and not as a variable, therefor the when changing values in the .env file you didn't change anything on the code. you really need to recompile the project again to update the static data that your compiled code is using.

Example:

you have a code:

var Environment = process.env.APP_ENV

and your .env file has

APP_ENV=local

your compiled code will look like this

var Environment = 'local'

UPDATE..

you can't even make vue.config.js to hot-reload. when you change anything on that file you also really need to recompile.. since vue.config.js is the config for the compiler itself. webpack is the compiler and the vue.config.js is it's config.

user_66449750

Run a build then go back to your dev version. It will apply the changes.

user_46344860
Related