CODEWITHSUNDEEP
javascriptnode.jsvue.jsenvironment-variables
capiono
capiono

Reputation: 2997

using environment variables in vuejs application

I read this articles on how to use environment variables in vuejs.

I have setup my local .env.local file and installed dotenv

VUE_APP_AUTH_AUTHORITY = 'http://localhost/auth'

and I have a config file 

export default {
  AUTH_AUTHORITY: process.env.VUE_APP_AUTH_AUTHORITY,
}

This works on my local machine.

After preparing the build on the development, I want to deploy the build output to the production environment and set the environment variable in production.

The build has to be done in the development environment and the output sent to the production team at a different location.

At the it looks like the application is not picking up the env variable in production environment.

I have set the value for VUE_APP_AUTH_AUTHORITY on the server (windows 2012) and the application is running on IIS.

Does the value needs to be set during the build of the package for it to be available in the application?

Upvotes: 3

Views: 4888

Answers (1)

Max Sinev
Max Sinev

Reputation: 6034

When you specify variables in .env.* you can not change it in runtime because these "variable names" just will be replaced with variable value during bundling with Webpack(it uses DefinePlugin for this).

You can see in output js bundle that your process.env.VUE_APP_AUTH_AUTHORITY just replaced in code with 'http://localhost/auth' string. So env variables are used during build only(by Nodejs environment).

For production you should prepare .env.production with your variables and build your app with production mode.

See also docs: Using Env Variables in Client-side Code / Vue Cli

Upvotes: 1

Related Questions