本地启动前端项目，如何让外部通过ip去访问

前言：在实习中，遇到了本地启动vue-cli/create-react-app项目，想要用ip去访问本地启动的项目。

一：部署ip和localhost都可以访问本地vue-cli项目

在配置文件vue.config.js中，找到devServer对象的host属性。（vue-cli将host主机名定义为localhost,从而导致了本地IP不能访问服务）

host: 'localhost', // can be overwritten by process.env.HOST

方法一：配置文件中的host属性重新定义为：0.0.0.0

host: '0.0.0.0'

方法二：查看package.json文件，将scripts下的dev属性增加 --host 0.0.0.0

"scripts": {
    "serve": "rimraf -rf ./node_modules/.cache/vue-loader && vue-cli-service serve --host 0.0.0.0",
    "build": "vue-cli-service build",
    "test": "vue-cli-service build --mode test",
    "lint": "vue-cli-service lint"
  },

然后重启服务，一般就可以实现这个功能了。

问题：出现n个问题的解决方案

• 网络原因：直接切换到另外一个wifi或者网络。重新获取本地IP，换IP访问即可（笔者经常性是这个问题，超大概率）。
• 防火墙：需要关闭电脑防火墙
• config目录下有一个index.js和package.json只修改一处，应该2处都修改为0.0.0.0

二：部署ip和localhost都可以访问本地create-react-app项目

在项目的pakeage.json配置文件中的scripts对象的dev属性增加 --host 0.0.0.0 (或者将0.0.0.0替换成本机的ip------ip是本机的IP)，然后重新启动项目，就可以在其他主机通过ip:项目端口/访问路径访问对应的项目内容了

参考文章：通过IP访问vue-cli项目的步骤和PC端可通过IP访问，手机无法访问的问题解决

原因：webpack官网