By default, vue-cli operates with http://localhost:8080, but this can cause problems, especially for those working with more than one work case.

Faced with the challenge of having a URL with a custom domain for localhost testing, we looked in the official documentation and found some options, which resolved the case very well.

To make the article very clear that the subject is just the use of a custom domain for vue in a test environment, let’s install a new vue application on our local server.

Installing vue with VUE-CLi

For our installation, we will give the “vue-custom-domain name” to our project.

vue create vue-custom-domain

Select version VUE 3, Default ([Vue 3] babel, eslint)

Default ([Vue 3] babel, eslint)

After installing the VUE3 files on your server, we will enter the folder that VUE-CLI created for us

cd vue-custom-domain

Make sure it is in the /vue-custom-domain folder. Now that we are inside the folder where the VUE files are installed, let’s start the NPM server, with the following command:

npm run serve

After starting the NPM server, if everything went as expected, we will receive a screen containing the address (url) of our APP, something like – Location: http://localhost:8080/

DONE Compiled successfully in 9410ms 08:56:55

App running at:
- Local: http://localhost:8080/
- Network: http://10.0.0.181:8080/ (your IP)

Note that the development build is not optimized.
To create a production build, run npm run build.

http://localhost:8080/

Open your VS Code to configure localhost:8080 URL for custom domain in your VUE app

Open your VS Code to configure localhost:8080 URL for custom domain in your VUE app.

To open VS Code, do not close the window where your NPM server is running, open another window in your terminal.

With another terminal window open, make sure you are in your project folder /vue-custom-domain

cd vue-custom-domain

Now give the command to open your VS Code

code .

With VS Code open, select the vue.config.js file, which is in the root of the project.

Inside the vue.config.js file we will place codes so that we can modify the app’s url from http://localhost:8080 to a custom domain (personalized), for operation in a development/test environment

With the vue.config.js file open, include the source code below, so we can replace http://localhost:8080 with a custom url (personalized)

Open vue.config.js

Now we need to restart the NPM server to the new settings, with the modification of your VUE http://localhot:8080 to a custom/personalized domain

CTRL + c

The NPM server is stopped and now we are going to restart it, because from this point on, we will no longer load our VUE APP via the url http://localhost:8080. From now on, new settings will load from http://localhot:8080 to a custom domain, in this case http://vue-custom-domain.test/

npm run serve

It worked out!! Our vue app is running with a custom / personalized url in development / testing environment.

Notice in the image below, that before the vue app was loaded with the default url http://localhost:8080, but now it loads with the custom url http://vue-custom-domain.test:8080

To make sure that our app’s custom url works correctly, we can type it into our browser, so let’s go, open your browser and type the custom url below
http://vue-custom-domain.test:8080

---

Vue Change URL from localhost:8080 to custom domain solved

Vue Change URL from localhost:8080 to custom domain solved

---

Video Tutorial Vue Change URL from localhost:8080 to custom domain

---

Github repository project Vue Change URL from localhost:8080 to custom domain

Access Github repository of project Vue Change URL from localhost:8080 to custom domain

https://github.com/Tellys/vue-custom-domain

---

Error: getaddrinfo ENOTFOUND

Case Error: getaddrinfo ENOTFOUND see this article [ https://www.conteudopertinente.com.br/npm/error-getaddrinfo-enotfound-npm-run-serve/ ]

---