通过IP访问vue-cli项目的步骤和PC端可通过IP访问,手机无法访问的问题解决

前言:启动vue-cli项目服务,在PC端用本机IP可访问此网站,但是手机访问却拒绝了我们的链接请求。从而无法从手机上预览效果。

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

(1)查看config目录下有一个index.js, 找到dev对象的host属性(vue-cli将host主机名定义为localhost, 从而导致了本地IP不能访问服务)

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

(2)host重新定义为:0.0.0.0

host: '0.0.0.0'

(3)查看package.json文件,将scripts下的dev属性增加 --host 0.0.0.0

"scripts": {
        "dev": "webpack-dev-server --inline--progress --config build/webpack.dev.conf.js  --host 0.0.0.0",
        "start": "npm run dev",
        "build": "node build/build.js"
    },

然后,请记得重启服务,一般就可以实现这个功能了。但是笔者其实在这个方法的使用过程中发现了前言里发现的问题

二、问题的n个解决方案

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

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章