vue-cli项目无法用本机IP访问的解决方法

下面是关于“vue-cli项目无法用本机IP访问的解决方法”的详细攻略：

问题描述

使用vue-cli脚手架构建的项目，默认情况下只能通过localhost:port的方式来访问，无法使用本机IP地址进行访问。比如使用npm run serve命令启动本地调试服务器后，打开浏览器，在本机上访问http://localhost:8080是可以正常访问的，但使用http://192.168.0.101:8080或http://127.0.0.1:8080这样的IP地址进行访问时却无法正常加载页面。

解决方法

方法一：在package.json文件中添加--host参数

在项目目录下的 package.json 文件中添加一行 "--host": "0.0.0.0" 的配置项即可。具体配置如下：

{
  "scripts": {
    "serve": "vue-cli-service serve --host 0.0.0.0"
  }
}

其中 "--host": "0.0.0.0" 表示让本地调试服务器监听所有可用的网卡接口。这样，就可以通过IP地址访问本地服务了。

方法二：使用http-server

另外一个解决方法是使用 http-server 工具，其使用方法如下：

1. 首先，使用 npm 全局安装 http-server：

npm install http-server -g

1. 进入项目根目录，启动 http-server：

cd /path/to/project
http-server -p 8080 -a 192.168.0.101

其中 -p 8080 表示监听8080端口，-a 192.168.0.101 表示指定访问IP地址为 192.168.0.101。

启动成功后，就可以通过 http://192.168.0.101:8080 访问本地服务了。

总结

以上就是“vue-cli项目无法用本机IP访问的解决方法”的两种完整攻略。需要多考虑一些场景，根据具体情况选择合适的方法。如果仍然无法解决问题，可以尝试通过检查本地服务绑定的端口以及防火墙设置等方法来解决。