Vue CLI: Using a custom domain

Vue CLI is a great tool for working locally on a Vue JS project.

After initial setup, a local server can be started with:

npm run serve

The server will typically be found at something like 'localhost:8080'.

It is nicer to have a URL relating to the project to work with locally, and can be less confusing if running a Vue front-end, with something else providing the API.

To configure this, create a file named 'vue.config.js' in the project root (on the same level as 'package.json', this file doesn't exist by default). Add the following to it, replacing 'projectname.local' with the local URL you want to use:

module.exports = {
  devServer: {
    host: 'projectname.local'
  }
}

Next, edit your hosts file and add a new entry for the URL.

On Windows this is usually found at: 'C:/Windows/system32/drivers/etc/hosts'

On Mac/Linux this is at: '/etc/hosts'

You may need to run your text-editor as an admin/superuser to edit this file.

Add this entry to the bottom of the file, replacing 'projectname.local' with your local URL:

127.0.0.1 yourprojectname.local

Now run 'npm run serve' and it will now be running at your new domain: