解决 webpack-dev-server 不能使用 IP 访问
webpack 是众所周知很好用的打包工具,在开发 vue 项目时,vue-cli 就集成了 webpack。
我们启一个服务:npm run dev
然后在浏览器可是使用 http://localhost:8080 访问,但是当我们遇到移动端项目时,需要在手机端访问,所以要把 localhost 换成本地 IP 地址,例如:http://192.168.x.xx:8080,你会发现移动端无法使用 IP 访问。
解决方案
第一种方法:
找到 your-project/build/webpack.dev.conf.js
// const HOST = process.env.HOST
const HOST = '192.168.x.xx:8080'
然后保存,重新启动一下服务,会发现 PC 地址栏已经变成:
http://192.168.x.xx:8080 了,然后手机试一试,没问题。
第二种方法:
找到 your-project/package.json
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js"
在这句话里面添加参数 --host 0,0,0,0
"dev": "webpack-dev-server --inline --host 0.0.0.0 --progress --config build/webpack.dev.conf.js"
然后在 PC 地址栏输入:http://192.168.x.xx:8080 or localhost or 0.0.0.0 都可以访问,手机使用 IP 访问也是没问题。
最后提醒大家,手机可以访问的前提是:手机和电脑需要连的同一个 wifi。
解决 webpack-dev-server 不能使用 IP 访问的更多相关文章
- 配置Webpack Dev Server 实战操作方法步骤
本文摘要:配置 Webpack Dev Server 可以解决本地开发前端应用时,手动执行 webpack 命令或 yarn build 命令,再去浏览器中访问 dist/index.html 的麻烦 ...
- [Webpack] Access Webpack Dev Server from Mobile Safari on an iPhone
Testing your sites on mobile devices is a critical part of the development process. Webpack dev serv ...
- 笔记:配置 webpack dev server
笔记:配置 webpack dev server 安装 webpack-dev-server 组件 配置 webpack.config.js 配置 增加 html-webpack-plugin 组件 ...
- 解决修改SQL SERVER 默认1433端口 访问出错的问题;
1. 如何修改 数据库默认的 1433端口: SQL SERVER 配置管理器中 SQLSERVER 网络配置 xxx数据实例的协议中的 TCP/IP 中 默认端口 都修改为 自己定义的端口 例如 ...
- 解决mysql本地数据库不能用ip访问的问题
[转]http://gone18611.blog.163.com/blog/static/1851943120104705244116/ MYSQL数据库缺省安装后,其默认用户名ROOT如果只能以&l ...
- webpack dev server 和 sublime text 配合时需要注意的地方
参考:https://webpack.js.org/guides/development/ Adjusting Your Text Editor Some text editors have a &q ...
- webpack dev server 配置 启动项目报错Error: listen EADDRINUSE
Error: listen EADDRINUSE 0.0.0.0:5601 它的意思是,端口5601被其他进程占用. 切换端口即可解决问题
- Nginx 禁止IP访问
我们在使用的时候会遇到很多的恶意IP攻击,这个时候就要用到Nginx 禁止IP访问了.下面我们就先看看Nginx的默认虚拟主机在用户通过IP访问,或者通过未设置的域名访问(比如有人把他自己的域名指向了 ...
- nginx下只能通过域名,禁止使用ip访问
今天来了一个需求,ip访问返回500,域名访问正常,只需在nginx.conf中添加 server { listen 80 default; #default 必须加的 return 500; } 也 ...
- Nginx 禁止IP访问 只允许域名访问
今天要在Nginx上设置禁止通过IP访问服务器,只能通过域名访问,这样做是为了避免别人把未备案的域名解析到自己的服务器IP而导致服务器被断网,从网络上搜到以下解决方案: Nginx的默认虚拟主机在用户 ...
随机推荐
- MTV
M:模型 models.py T:模板 html C:控制 urls.py 和 views.py 与MVC类似
- 9.Break和Continue
Break直接跳出循环和Continue略过本次循环,循环继续执行: Break在任何循坏语句的主体部分,均可用break控制循环的流程.break用于强制退出循环,不执行循环体中的语句,后边语句继续 ...
- python类型-序列-元组
元组是一种不可变类型,元组可用作一个字典的key. 1.创建一个元组并进行赋值 atuple = (123, 'abc', ('inner', 'tuple'), 7-9j) 2.访问元组中的值 元组 ...
- Dynamics 365 CRM 在 Connected Field Service 中部署 IoT Central (二)- 匹配设备
上个blog中介绍了我们怎么去部署IoT central和 connected field service做连接. 我们这次介绍怎么把IoT设备在CRM中怎么去注册. 首先我们打开devices,再选 ...
- [HNOI2008]Cards(dp,Burnside引理)
Burnside引理: 参考自 某大佬对Burnside引理和Polya定理的讲解 相关概念 群:在数学中,群表示一个拥有满足封闭性.满足结合律.有单位元.有逆元的二元运算的代数结构. 置换群:由有限 ...
- linux下redis的部署
https://www.cnblogs.com/wangchunniu1314/p/6339416.html https://www.linuxidc.com/Linux/2017-09/146894 ...
- JDK 1.8 完整日期时间Api (文末附示例)
一.背景 jdk 1.8 之前, Java 时间使用java.util.Date 和 java.util.Calendar 类. Date today = new Date(); System.out ...
- 两张导图带你走进Spring设计模式与编程思想
两张思维导图带你了解Spring Spring常用设计模式 Spring设计思想
- python+selenium爬取百度文库不能下载的word文档
有些时候我们需要用到百度文库的某些文章时,却发现需要会员才能下载,很难受,其实我们可以通过爬虫的方式来获取到我们所需要的文本. 工具:python3.7+selenium+任意一款编辑器 前期准备:可 ...
- linux下面误删root里面的文件夹 恢复方法
手残吧 /root/ 里面的文件删除了. .mkdir /root cp -a /etc/skel/.[!.]* /root 主要是吧 /etc/skel/里面的文件拷贝回去就行了~~~哈.. 转自: ...