解决 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的默认虚拟主机在用户 ...
随机推荐
- <s:select>自动加标签
在使用<s:select>标签时,发现页面位置不对,查看页面源码发现 <tr> <td class="tdLabel"></td> ...
- Java入门 - 高级教程 - 06.邮件收发
原文地址:http://www.work100.net/training/java-email.html 更多教程:光束云 - 免费课程 邮件收发 序号 文内章节 视频 1 概述 2 发送一封简单的邮 ...
- equals()和hashCode()必须同时覆盖的原因
我们在用JAVA创建自己的类的时候,一种比较常见的覆盖就是覆盖Object中的equals()方法和hashCode()方法.如果不这样做的话,就很可能违反Object.hashCode()的通用约定 ...
- [洛谷P2962] [USACO09NOV] 灯Lights
Description Bessie and the cows were playing games in the barn, but the power was reset and the ligh ...
- python读取txt打印(print)出乱码的问题
如下图所示,print第一行首位出现乱码的问题 网上的解答是因为UTF-8的BOM前缀(\xef\xbb\xbf) 解决这个问题的方法很多,最快捷的方法是txt文本另存为的时候更改编码格式 将txt另 ...
- springboot中的那些连接池
hello~各位读者新年好! 回想起前几天在部署springboot项目到正线时,线上环境要求jdk7,可项目是基于jdk8开发的,springboot也是用的springboot2以上的版本,可以说 ...
- zabbix3.4源码安装步骤
zabbix3.4源码安装步骤1.安装环境: 安装机器:22.224.9.227 以下简称监控机: 操作系统信息:内核版本: Linux version 2.6.18-194.1.AXS3 (pack ...
- PYTHON经典算法-二叉树的后序遍历
二叉树的后序遍历 问题描述 给出一个二叉树,返回其节点值的后序遍历 问题示例 给出一个二叉树{1,x,2,3}其中x表示空.后序遍历为[3,2,1] 这个图怎么画的呢?答案 需要注意的地方是:bina ...
- Codeforces Round #617 (Div. 3)F. Berland Beauty
题意: 给一棵树,边权未知,现在给m组约束,每组约束给出从u到v路径中的最小值,现在让你给出一组边权,使得符合之前的约束,不能给出输出-1 思路: 因为n较小,对于每组约束我们可以直接暴力修改路径上的 ...
- Hyper-V虚拟机设置外部网络访问
在Hyper-V管理器中新建一个虚拟交换机,类型为 内部 ,修改名称为 nat 在虚拟机的设置页面中,将网络适配器设置为新建的虚拟交换机 nat 打开win10->控制面板->网络和共享中 ...