Problems and solutions to the inability to access VUE projects through IP addresses

Issues that cannot access VUE projects through IP addresses

Problem background

Currently, the project is separated from the front and back ends. VUE+SpringBoot. I copied the front-end project and ran it on my own machine. It can be accessed through localhost+port number, but cannot be accessed through the IP address.

Problem solving

I searched for a lot of information online. At first I thought it was a problem with my backend Java project, and even considered the configuration of tomcat. However, tomcat is built with the framework or compiler and is not easy to modify.

Later I found out that it should be a problem with the front-end project. After searching, I found the root cause of the problem.

Just modify it in the file in the VUE project

scripts:dev attribute,

Add --host 0.0.0.0 after the property

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/ --host 0.0.0.0",
    "start": "npm run dev",
    "build": "node build/"
  }

Try again and you can access it through localhost. You can also access it through IP address

Specify IP access to VUE projects

First, introduce the Sohu IP-check interface, just like this, put it on the <body> tag (this can be used to check the IP of the visitors)

 <script src="/cityjson?ie=utf-8"></script>
  <script type="text/javascript">
     ('ip', returnCitySN["cip"])
     ('area', returnCitySN["cname"])
  </script>

Then use () to obtain the IP in the component that needs to obtain the guest IP, see the following picture

const IP = ('ip')

I used vue's global routing navigation to implement it, the code is as follows

((to, from, next) =&gt; {
  const IP = ('ip')
  // (IP)
  // Set up a guest IP whitelist  var ipList = ['192.172.172.240','182.48.114.141','163.16.50.159']
   = (IP)
  if(){
    // If it is a whitelist IP, go and determine whether to log in    if () {
      next();
      // (1)
    } else {
      let token = ("satoken");
      if (token === null || token === '' || token === undefined) {
        next('/login');
        // (2)
      } else {
        next();
      }
    }
  }
  else{
    ("Error ip")
    alert("No access permission");
    closeWin();
  }
})

closeWin() is the method to close the access page (can also use alert instead) the code is as follows

closeWin() {
  if (("Firefox") != -1 || ("Chrome") != -1) {
       = "about:blank";
      ();
  } else {
       = null;
      ("", "_self");
      ();
  }
}

The above is personal experience. I hope you can give you a reference and I hope you can support me more.