2

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?

cassini
  • 79
  • 2
  • 9
  • quite likely your firewall is blocking it – Keith Nicholas Apr 30 '20 at 06:46
  • thank you for the tip. I am using windows 10 so I tried adding an inbound/outbound rule to my firewall. I chose port 8080 for the rules. But it still doesn't work yet, is there something other I could try which is related to the firewall? – cassini Apr 30 '20 at 06:57
  • assuming you opened 8080 for an inbound TCP port...... your other problem can be your wifi router, sometimes they prevent devices contacting other devices on the same network, there's usually a setting to turn that off – Keith Nicholas Apr 30 '20 at 07:01
  • exactly, that is what I added as a rule. I will check the thing with the router, thank you. However I am surprised because when I had a similar problem with my flask server some time ago, I did not need to change anything with the router. – cassini Apr 30 '20 at 07:23
  • possibly its not that.... it's just there's many things in the chain that can cause problems. ie, another problem is you accidently turn your wifi off and your data is going through the mobile network.... – Keith Nicholas Apr 30 '20 at 09:06
  • do you think, that a corporate proxy I am using could be a possible problem? – cassini Apr 30 '20 at 12:41
  • as my flask app was accessible from another device via :5000, i now tried to run my vue app on port 5000...i still can't get to the site from my smartphone when vue is running on that port – cassini Apr 30 '20 at 12:58
  • @cassini I'm facing a similar problem, but when I can access a Python webserver without a problem. Could my organization's firewall be blocking the Vue app but not the python server? – Martim Passos Oct 22 '21 at 18:01

3 Answers3

2

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.

Salahin Rocky
  • 415
  • 9
  • 18
0

Step 1: Add following under scripts in package.json

"serve": "vue-cli-service serve --host 0.0.0.0"

step 2: run npm install @vue/cli-service

step 3: run npm run serve

This will start the app in a different port than your dev port. In terminal one can see the network address which can be used to view the app in phone browser.

postylem
  • 1,185
  • 12
  • 26
Rajarshi Mandal
  • 81
  • 4
-3

Normally when you execute the npm run serve command, it gives you two addresses to access your application. A local address and a network address. Like this :

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

So with your phone you should use the network address and not the local one.

A.Rahman
  • 45
  • 1
  • 11
  • Or may be you turned of your PC's wifi/you where not connected to your network before running the server. So it didn't provide you a network address. – A.Rahman Apr 30 '20 at 09:35
  • 1
    yes, i used the network address from my phone and made sure that i am connected to the same network. Just to make sure, I will try again later. anyway thank you for your answer :) – cassini Apr 30 '20 at 11:02