Vue - use ip, localhost to access the project at the same time

GitHub demo address

online preview

sequence

Running through localhost can only be accessed locally. Sometimes debugging needs to be accessed on other devices, and in this case it needs to be accessed through an IP address.

Effect:

Solution:

step 1:

Use one of the two methods ( 1)、方法1, ) in step 12)、方法2

1), method 1 (recommended)

First modify the modification config/index.jsin the path host
host: 'localhost' tohost: '0.0.0.0',

If run at this time, the result is as follows

However, the automatically opened web page starts with 0.0.0.0. If you want to change the automatically opened web page to display the IP address, you need to do the following:

Adding build/webpack.dev.conf.jsin the path will open the page in the form of ip:port, and you can also open the page through localhost:port or 127.0.0.1:port.devServeruseLocalIp:true,

2), method 2

You can also add in thepackage.json filedev--host 0.0.0.0"

 "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 0.0.0.0",

Step 2:

modify the build/webpack.dev.conf.jspathmessages

  // messages: [
  //   `Your application is running here: 
  //   http://${devWebpackConfig.devServer.host}:${port}`
  // ]
  messages: [
    `Your application is running here: `,
    `Local: http://localhost:${
      
      port}`,
    `Network: http://${
      
      require('ip').address()}:${
      
      port}`,
  ],

Final running effect:

At this time, the project that is automatically opened when running is also the address of the local ip