通过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: 'l...
·
前言:启动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
更多推荐
已为社区贡献9条内容
所有评论(0)