解决VUE项目localhost端口服务器拒绝连接,只能用127.0.0.1的问题

当我们在使用Vue CLI开发Vue.js项目的时候，有时在浏览器中输入http://localhost:8080/会出现服务器拒绝连接的错误，只有使用http://127.0.0.1:8080/才能正常访问项目。这是由于Vue CLI默认绑定的是127.0.0.1地址而非localhost地址，因此我们需要对Vue CLI的配置进行修改。

下面是解决该问题的完整攻略：

1. 修改Vue CLI配置

打开Vue项目的根目录，找到config/index.js文件，找到其中的dev属性，并对其中的host属性进行修改，将其从默认值localhost改为0.0.0.0，示例如下：

dev: {
  host: '0.0.0.0',
  port: 8080,
  autoOpenBrowser: false,
  ...

修改完成后保存该文件。

2. 重启Vue项目

修改完配置后，我们需要重启Vue项目以使其生效。在项目根目录下运行以下命令重启Vue项目：

npm run dev

接着我们再次访问http://localhost:8080/，发现此时已经可以正常访问了。

示例说明

示例一

小明在使用Vue CLI开发Vue.js项目时出现了“localhost端口服务器拒绝连接,只能用127.0.0.1”的问题。他通过修改Vue CLI的配置文件来修改host属性的值为0.0.0.0，并保存文件后通过重新启动Vue项目成功解决了该问题。

示例二

小张使用Vue CLI开发Vue.js项目时也遇到了“localhost端口服务器拒绝连接,只能用127.0.0.1”的问题。他在网上搜索后发现该问题的原因是由于Vue CLI默认绑定的是127.0.0.1地址而非localhost地址，然后他按照上述攻略步骤对Vue CLI配置进行了修改，并成功解决了该问题。