Cannot access Vue project by IP address on other devices vue cli 3 npm

Question

I have a project created with vue cli 3. When I run the command "npm run serve", it gives the following success message (I replaced my IP address with fake #'s):

App running at:
- Local: http://localhost:8080/
- Network: http://1.2.3.4:8080/

Everything works fine on my own computer. On my own computer I can access both by Local and by IP address, but I cannot access with network address on other devices connected to the same wifi network.

I have tried the following:

On vue.config.js:
devServer: {
    host: '0.0.0.0'
}

and
devServer: {
    open: process.platform === 'darwin',
    host: '0.0.0.0',
    port: 8080,
    https: false,
    hotOnly: false
}

on my package.json:
"scripts": {
    "serve": "vue-cli-service serve --host 0.0.0.0",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
}

and
"scripts": {
    "serve": "vue-cli-service serve --host 0.0.0.0 --allowed-hosts 1.2.3.4",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
}

My tomcat server runs on port 80, and that works fine on both my computer and other devices...I am not sure what else to do...

This is the error page I run into: How can I make it so that I can access my vue project from other devices on the same network?

Thank you for your time and help!

Architectonics

Answer 1

Till the date, npm run serve in any Vue.js project will allow you to access the project from any device locally or in the network (App running at):

In case that you are in Windows (as the host) and the project isn't accessible from other devices in the network at the mentioned address by the CLI, you need to allow inbound connections of Node.js in your Firewall settings:

Search for the Node.js related rules and modify them, allowing the inbound connections:

In my case I had 4 rules related to Node.js, after allowing the inbound connections, I was able to access the project served from my Desktop in my Mobile Device in the same network.

Bakelite

Answer 2

Because you only access your device. Lets try remove --allowed-hosts 1.2.3.4

Silicious

Answer 3

Firstly, in the host param of the devserver you have to add the legit IP adress of your router, for it to work, but if you dont require specific settings, just want it to be served on your network:

I usually just do this in my package.json:

 "serve": "vue-cli-service serve",

and vue.config.js, you can remove everything that is related to devServer. This will create a dev server that will work on your network.

Parochialism