node.jsvue.jsenvironment-variablesvue-clivue-cli-3

Using Environment Variables with Vue.js

I've been reading the official docs and I'm unable to find anything on environment variables. Apparently there are some community projects that support environment variables but this might be overkill for me. So I was wondering if there's something simple out of the box that works natively when working on a project already created with Vue CLI.

For example, I can see that if I do the following the right environment prints out meaning this is already setup?

mounted() {
  console.log(process.env.ROOT_API)
}

I'm a kinda new to env variables and Node.

FYI using Vue CLI version 3.0 beta.

Solution

  • Vue.js with Webpack

    If you use vue cli with the Webpack template (default config), you can create and add your environment variables to a .env file.

    The variables will automatically be accessible under process.env.variableName in your project. Loaded variables are also available to all vue-cli-service commands, plugins and dependencies.

    You have a few options, this is from the Environment Variables and Modes documentation:

    .env                # loaded in all cases
.env.local          # loaded in all cases, ignored by git
.env.[mode]         # only loaded in specified mode
.env.[mode].local   # only loaded in specified mode, ignored by git

    Your .env file should look like this:

    VUE_APP_MY_ENV_VARIABLE=value
VUE_APP_ANOTHER_VARIABLE=value

    As noted in comment below: If you are using Vue cli 3, only variables that start with VUE_APP_ will be loaded.

    Don't forget to restart serve if it is currently running.

    Vue.js with Vite

    Vite exposes env variables that start with VITE_ on the special import.meta.env object.

    Your .env should look like this:

    VITE_API_ENDPOINT=value
VITE_API_KEY=value

    These variables can be accessed in Vue.js components or JavaScript files under import.meta.env.VITE_API_ENDPOINT and import.meta.env.VITE_API_KEY.

    Tip: Remember to restart your development server whenever you change or add a variable in the .env file if it's running.

    For more info, please see the Vite documentation for env variables.