使用yarn run dev启动Vue-cli项目后无法连接localhost:8080求助

Hey there, let’s walk through fixing this issue—since your project compiles fine but the browser can’t reach localhost:8080, the problem’s likely related to port handling, network settings, or small configuration quirks. Here are the most effective steps to try:

• Check the actual port your dev server is using
  Vue CLI automatically switches to a different port if 8080 is already occupied by another app (like a database, another dev server, or even a hidden process). Look closely at your terminal output after running yarn run dev—you should see a line like:

  App running at:

  • Local: http://localhost:xxxx
    Use that xxxx port instead of 8080 to access your app. To confirm if 8080 is occupied:

  • On macOS/Linux: Run lsof -i :8080 in your terminal to see which process is using the port.
  • On Windows: Run netstat -ano | findstr ":8080" to find the process ID, then end it via Task Manager if needed.

• Verify your dev server configuration
  Even if you didn’t manually set the port, double-check your vue.config.js file (if you have one) for a devServer section. It might accidentally override the port like this:

  module.exports = {
    devServer: {
      port: 8081 // This would change the default port
    }
  }
  

  If there’s no such config, the server should use 8080 (or fall back to another port if it’s taken).

• Rule out firewall/proxy interference
  Your local firewall might be blocking incoming connections to port 8080. Try temporarily disabling your firewall (just for testing) to see if that fixes the issue. Also, check if your browser is using a proxy or VPN—disable any active proxy extensions or VPN connections, then try accessing the URL again.

• Test in incognito mode or clear browser cache
  Sometimes browser cache or stored session data can cause weird connectivity issues. Open an incognito/private window and try accessing the URL. If that works, clear your regular browser cache and cookies to resolve the problem permanently.

• Try alternative addresses
  Instead of localhost:8080, test these addresses:

  • http://127.0.0.1:8080 (the loopback IP, sometimes works when localhost doesn’t)
  • Your local network IP (e.g., http://192.168.1.100:8080—find it via ipconfig on Windows or ifconfig on macOS/Linux)
    This helps rule out issues with how your system resolves the localhost hostname.

• Restart everything
  It sounds simple, but sometimes a fresh start fixes the problem. Kill the yarn run dev process (press Ctrl+C in the terminal), close your browser entirely, then restart both the dev server and browser.

• Check your Vue CLI version
  Older versions of Vue CLI might have unexpected behavior. Run vue --version in your terminal to check. If you’re using a version older than 4.x, consider updating it (make sure to back up your project first) with npm update -g @vue/cli or yarn global upgrade @vue/cli.

Start with checking the actual port in your terminal output—that’s the most common fix for this issue. If none of these steps work, feel free to share more details like your operating system, Vue CLI version, and any extra lines from the terminal (even if it says "compiled successfully").

内容的提问来源于stack exchange，提问作者Ash