我们平常在做vue或者react项目时，往往会使用脚手架直接搭建，有些脚手架会封装好使用本地的ip进行项目的访问，但是有些时候我们使用npm run dev或者npm start运行项目，发现只有localhost:8080类似的访问地址，这个时候如果我们有额外的需求，不如用手机来访问看看效果，会发现localhost这个地址是生成不了二维码的，这个时候我们就需要自己动手去配置。目前我所了解的方式有三种：
-
webpack.config.js文件中配置
如果是自己使用webpack搭建的项目，往往有一个webpack.config.js的文件，在与module属性同级的对象中，添加一个devServer属性，如图所示：
注：10.8.0.92为我本地的ip地址，具体的ip地址根据自己的服务器ip地址决定，port为端口号，这样运行之后我通过访问10.8.0.92:8888即可访问该项目，如图所示： -
2.webpack的config配置文件
我们平常使用vue-cli，配合webpack搭建起一个项目，我们在package.json中查看运行的命令：
可以看到该项目的入口编译文件为build文件夹下面的webpack.dev.conf.js,我们再查看webpack.dev.conf.js可能就能发现其他端倪：
在这个文件中，引入了上一层文件夹的config文件，还可以看出devServer中的host和port配置都是在未配置的情况下被config的配置覆盖的，我们在找到config，发现config是一个文件夹，其中包含着index.js文件，此时就可以在dev中对host和port进行配置：
之后重新npm run dev运行，即可用配置的ip和端口访问到 -
在package.json配置时添加
在package.json中有启动的命令配置，如图所示：
此时我们可以直接在dev的启动命令后加上--host 0.0.0.0即可使用ip访问，如图所示：
注：此时重新运行项目，命令行可能还是显示的使用localhost:8888访问，但是在浏览器中使用对应的ip访问即可，不会报错以上三种方法其实本质都是一样，都是在dev配置中改变，只是针对不同的项目构建方式可能文件及位置不一样，所以有不同的方案。以上。