How to set base URL and global variables in Vue.js

In this tutorial, you’ll learn how to set base URLs and global variables for different environments in Vue.js e.g. production, staging, development.

Everyone has their own way of doing it but I came across this environment-based solution, which you might find useful.

I used to set base URL and other global variables inside the index.html file, which is a bad practice, I wouldn’t recommend doing it this way. Also, you should never hard-code your app’s base URL and global variables inside your components.

Firstly, because you expose your sensitive data in the index.html (even though you can still access it in your minified app .js file.

Secondly, you’ll need to manually edit your apps base URL and other variables for each builds e.g. changing from http://localhost:8000/ to https://life.renatello.com/. It’s easy to mess up your production app.

How to have custom development/build modes in Vue.js

You should create config files for each environment mode prod.env.js, staging.env.js and dev.env.js inside your ./config folder.

Now let’s see what’s inside these config files, e.g. here is dev-staging.env.js for one of my projects:

module.exports = {
  NODE_ENV: '"development"',
  VUE_APP_BASE_URL: '"https://life.renatello.com/"',
  STRIPE_TOKEN: '"YOUR_TOKEN"'
}

As you can see we’ve got 3 variables: NODE_ENV, VUE_APP_BASE_URL, which is our projects base URL and STRIPE_TOKEN. You can remove Stripe token and add other settings.

How to configure Vue.js config and build files for custom build/development modes

Now you can add your config files to ./config/index.js, like so:

// see http://vuejs-templates.github.io/webpack for documentation.
var path = require('path')
module.exports = {
  build: {
    // ...
  },
  buildStaging: {
    env: require('./staging.env'),
    // ...
  },
  buildProduction: {
    env: require('./prod.env'),
    // ...
  },
  devStaging: {
    env: require('./dev-staging.env'),
    port: 8080,
    // ...
  }
}

And then edit your package.json file, accordingly:

{
  // ...
  "scripts": {
    "dev": "cross-env ENABLE_ESLINT=true node build/dev-server.js",
    "dev:staging": "cross-env ENABLE_ESLINT=true node build/dev-staging-server.js",
    "build:production": "cross-env ENABLE_ESLINT=true node build/build-production.js",
    // ...
  }
  // ...
}

Don’t forget to create/or modify your ./build/dev-staging-server.js and ./build/build-production.js files. All you need to do there is replace your env variables.

Here is my dev-staging-server.js file:

require('./check-versions')()

var config = require('../config')
if (!process.env.NODE_ENV) {
  process.env.NODE_ENV = JSON.parse(config.devStaging.env.NODE_ENV)
}
// ...

Note this line process.env.NODE_ENV = JSON.parse(config.devStaging.env.NODE_ENV), which tells your app to change environment mode to the one we set in config.devStaging (./config/index file).

How to use base URL and global variables in templates

Now if I run my app with npm run dev, the base URL will be http://localhost:8000/, however, if we run it with npm run dev:staging the base URL will be https://life.renatello.com/.

You can then access, previously declared global variables, inside your templates:

axios.get(process.env.VUE_APP_BASE_URL + 'users/')

You should never hard-code your base URL and other global variables, e.g.:

axios.get('http://life.renatello.com/' + 'users'/ )

You should now be able to create different builds for different environments e.g. development and production.

All the API routes, your base URL and other global variables you set in config files will change automatically. You just need to run the right script:

npm run build:development

or

npm run build:production

I hope this tutorial was useful, please let me know in the comments below how I can improve it. 
Cheers,
Renat Galyamov

Want to share this with your friends?
👉renatello.com/vue-js-base-url-global-variables

PS: Make sure you check other Vue.js tutorials.

Incoming search terms: