解决 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的默认虚拟主机在用户 ...
随机推荐
- Spring(二)核心容器 - 简介 、BeanFactory、ApplicationContext
目录 前言 1.容器简介 2.容器的结构 2.1 BeanFactory 2.2 ApplicationContext 2.2.1 ConfigurableApplicationContext 2.2 ...
- git 工作中实用合并分支
合并分支 .克隆远程分支 git clone -b dev1. url .创建本地分支,并关联远程分支 git checkout -b dev_wt orgin/dev_wt .合并某分支到当前分支 ...
- ORM基础5
一.一对一 场景:字段多,且一部分字段使用率高 优点:提高效率 实质:唯一的外键 # Person表 class Person(models.Model): id = models.AutoField ...
- noip2017考前基础复习——数论数学
·最大公约数 gcd 辗转相除法 gcd(a,b)=gcd(b,a%b) int gcd(int x,int y){ ) return x; return gcd(y,x%y); } 效率O(log ...
- 每天玩转3分钟 MyBatis-Plus - 5. 高级查询(三)(条件构造器)
每天玩转3分钟 MyBatis-Plus - 1. 配置环境 每天玩转3分钟 MyBatis-Plus - 2. 普通查询 每天玩转3分钟 MyBatis-Plus - 3. 高级查询(一) 每天玩转 ...
- Boyer-Moore 算法 Leetcode169
Boyer-Moore 算法 Leetcode169 一.题目 169. 多数元素 给定一个大小为 n 的数组,找到其中的多数元素.多数元素是指在数组中出现次数大于 ⌊ n/2 ⌋ 的元素. 你可以假 ...
- java设计模式2————工厂模式
1.工厂模式介绍: 1.1.实现了创建者与调用者的分离 1.2.详细分类: 简单工厂模式 工厂方法模式 抽象工厂模式 1.3.所遵循的OOP原则: 开闭原则:对扩展开放,对修改关闭 依赖倒转原则:面向 ...
- C/C++中指针和引用之相关问题研究
一.基本知识 指针和引用的声明方式: 声明指针: char* pc; 声明引用: char c = 'A' char& rc = c; 它们的区别: ①从现 ...
- 透彻分析和解决一切javaWeb项目乱码问题
前言 乱码是我们在程序开发中经常碰到且让人头疼的一件事,尤其是我们在做javaweb开发,如果我们没有清楚乱码产生的原理,碰到乱码问题了就容易摸不着头脑,无从下手. 乱码主要出现在两部分,如下: 第一 ...
- CSS3 animation属性中的steps实现GIF动图(逐帧动画)
相信 animation 大家都用过很多,知道是 CSS3做动画用的.而我自己就只会在 X/Y轴 上做位移旋转,使用 animation-timing-function 规定动画的速度曲线,常用到的 ...