vue2配置IP地址访问项目

正常情况下，我们运行完项目都是这样的效果。上面的本地local地址 下面是自己电脑本地ip的访问方式。无论哪种访问都可以打开项目，但有的项目中运行完只有local地址却丢失了本地ip地址，下面将介绍如何添加本地ip。

在config.js文件中

//host: 'localhost' 
    //将localhost进行替换成 0.0.0.0
    host: '0.0.0.0', 
    port: 8080,

package.json配置文件

//在这句代码后面添加 --host 0.0.0.0" 比如

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

之后重启项目，你就会发现打开的http://0.0.0.0:8080是个空白网页，并没有打开IP地址或者localhost，如下图

d3c147edde54409c9075331e7c78fea6.png

对于上述问题，还需要配置下build文件夹下面的webpack.dev.conf.js文件

devServer: {
    useLocalIp: true, //将useLoackIp设置为true 就可以了
    }

配置一下启动项目 通过localhost 和本地ip地址访问

devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
        compilationSuccessInfo: {
          messages: [ //下面两个地方，直接复制即可
            `App runing at: `,
            ` - Local: http://localhost:${port}`, //配置这里
            ` - Network: http://${require('ip').address()}:${port}`,//配置这里
          ],
        },
        onErrors: config.dev.notifyOnErrors
        ? utils.createNotifierCallback()
        : undefined
      }))

最后重启项目 重新运行即可成功，可以正常显示并访问本地ip

参考网址 ： https://blog.csdn.net/qq_40576178/article/details/121136748