Vue项目本地运行环境下设置既能localhost访问又能IP访问，并且可以外网环境下通过域名访问

打开项目build下index.js文件，将localhost改为 0.0.0.0，port端口号改不改都行，只要保证这个端口号没有被占用即可。

然后打开项目package.json文件，找到

将红框内的改为：

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

然后重新运行项目。即可实现既能localhost:端口号访问又能IP地址:端口号 访问。

下面配置外网环境下域名访问。

将上面设置的端口号在路由器中配置端口映射。这里不多说了，可以百度。

我这里将刚刚项目里index.js文件配置的端口号11111映射到了23456端口。

到这一步就可以实现外网环境下通过公网IP:23456访问vue项目了。

百度IP可以查看到本机公网IP。

但是如果输入域名:23456访问会出现 

Invalid Host header  提示。

解决办法：

打开build/webpack.dev.conf.js文件，搜索“devServer”，添加如下配置：

disableHostCheck: true,// 解决域名访问本地运行地址时出现Invalid Host header的问题

如图所示： 

然后重新运行项目即可。