Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Access Vue.js application from other device in the same network (also using proxy)

so my problem is basically the same as here, but the question isn't answered yet.

The problem ist, that I can't view my vue application in the webbrowser when visiting <pc_ip>:8080. However when starting my vue.js app with npm run serve it tells me, that this is how I could access the page besides doing localhost:8080. It works from my PC but with my phone which is connected to the same wifi I get the error that the url is not reachable.

Thanks in advance!

UPDATE: So after finding some other posts I also tried writing some stuff to a vue.config.js like here, here, here or here e.g.

module.exports = {
    devServer: {
      port: 8080,
      host: '0.0.0.0'
    }
  }

However the problem still persists. I also tried replacing the host in that file with my actual ip, but it does not work either.

UPDATE 2: As mentioned in a comment, I had a similar problem some time ago, when trying to access my flask server from my phone which was in the same network. Back then I set the host variable to the pc's IP and it worked. As I tested again just now, I realized that the corporation proxy I have to use in parallel could play a role in this. When I wasn't connected via using plink.exe, I could not access my running flask server from my phone. When I connected after that, everything is working. Could the proxy or a missing configuration be hindering me to access my vue application?

UPDATE 3: so i turned of my firewall completely and then i could access the page from another device. I wondered if some other rule was blocking the port like in this post Windows Firewall - Laravel Artisan Serve - Allow Port in Inbound Rule (not working). But I am not sure how I would find that rule if there is one blocking my port?

like image 984
cassini Avatar asked Mar 03 '26 13:03

cassini


1 Answers

Please follow this link: Work around this problem

I add the following code to my vue.config.js

module.exports = {
  devServer: {
    port: 80,
    host: '0.0.0.0'
  }
}

change the port number according to your need.

like image 76
Salahin Rocky Avatar answered Mar 06 '26 02:03

Salahin Rocky