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 访问的更多相关文章

  1. 配置Webpack Dev Server 实战操作方法步骤

    本文摘要:配置 Webpack Dev Server 可以解决本地开发前端应用时,手动执行 webpack 命令或 yarn build 命令,再去浏览器中访问 dist/index.html 的麻烦 ...

  2. [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 ...

  3. 笔记:配置 webpack dev server

    笔记:配置 webpack dev server 安装 webpack-dev-server 组件 配置 webpack.config.js 配置 增加 html-webpack-plugin 组件 ...

  4. 解决修改SQL SERVER 默认1433端口 访问出错的问题;

    1. 如何修改 数据库默认的 1433端口: SQL SERVER 配置管理器中 SQLSERVER 网络配置 xxx数据实例的协议中的  TCP/IP 中 默认端口 都修改为 自己定义的端口 例如 ...

  5. 解决mysql本地数据库不能用ip访问的问题

    [转]http://gone18611.blog.163.com/blog/static/1851943120104705244116/ MYSQL数据库缺省安装后,其默认用户名ROOT如果只能以&l ...

  6. webpack dev server 和 sublime text 配合时需要注意的地方

    参考:https://webpack.js.org/guides/development/ Adjusting Your Text Editor Some text editors have a &q ...

  7. webpack dev server 配置 启动项目报错Error: listen EADDRINUSE

    Error: listen EADDRINUSE 0.0.0.0:5601 它的意思是,端口5601被其他进程占用. 切换端口即可解决问题

  8. Nginx 禁止IP访问

    我们在使用的时候会遇到很多的恶意IP攻击,这个时候就要用到Nginx 禁止IP访问了.下面我们就先看看Nginx的默认虚拟主机在用户通过IP访问,或者通过未设置的域名访问(比如有人把他自己的域名指向了 ...

  9. nginx下只能通过域名,禁止使用ip访问

    今天来了一个需求,ip访问返回500,域名访问正常,只需在nginx.conf中添加 server { listen 80 default; #default 必须加的 return 500; } 也 ...

  10. Nginx 禁止IP访问 只允许域名访问

    今天要在Nginx上设置禁止通过IP访问服务器,只能通过域名访问,这样做是为了避免别人把未备案的域名解析到自己的服务器IP而导致服务器被断网,从网络上搜到以下解决方案: Nginx的默认虚拟主机在用户 ...

随机推荐

  1. <s:select>自动加标签

    在使用<s:select>标签时,发现页面位置不对,查看页面源码发现 <tr> <td class="tdLabel"></td> ...

  2. Java入门 - 高级教程 - 06.邮件收发

    原文地址:http://www.work100.net/training/java-email.html 更多教程:光束云 - 免费课程 邮件收发 序号 文内章节 视频 1 概述 2 发送一封简单的邮 ...

  3. equals()和hashCode()必须同时覆盖的原因

    我们在用JAVA创建自己的类的时候,一种比较常见的覆盖就是覆盖Object中的equals()方法和hashCode()方法.如果不这样做的话,就很可能违反Object.hashCode()的通用约定 ...

  4. [洛谷P2962] [USACO09NOV] 灯Lights

    Description Bessie and the cows were playing games in the barn, but the power was reset and the ligh ...

  5. python读取txt打印(print)出乱码的问题

    如下图所示,print第一行首位出现乱码的问题 网上的解答是因为UTF-8的BOM前缀(\xef\xbb\xbf) 解决这个问题的方法很多,最快捷的方法是txt文本另存为的时候更改编码格式 将txt另 ...

  6. springboot中的那些连接池

    hello~各位读者新年好! 回想起前几天在部署springboot项目到正线时,线上环境要求jdk7,可项目是基于jdk8开发的,springboot也是用的springboot2以上的版本,可以说 ...

  7. zabbix3.4源码安装步骤

    zabbix3.4源码安装步骤1.安装环境: 安装机器:22.224.9.227 以下简称监控机: 操作系统信息:内核版本: Linux version 2.6.18-194.1.AXS3 (pack ...

  8. PYTHON经典算法-二叉树的后序遍历

    二叉树的后序遍历 问题描述 给出一个二叉树,返回其节点值的后序遍历 问题示例 给出一个二叉树{1,x,2,3}其中x表示空.后序遍历为[3,2,1] 这个图怎么画的呢?答案 需要注意的地方是:bina ...

  9. Codeforces Round #617 (Div. 3)F. Berland Beauty

    题意: 给一棵树,边权未知,现在给m组约束,每组约束给出从u到v路径中的最小值,现在让你给出一组边权,使得符合之前的约束,不能给出输出-1 思路: 因为n较小,对于每组约束我们可以直接暴力修改路径上的 ...

  10. Hyper-V虚拟机设置外部网络访问

    在Hyper-V管理器中新建一个虚拟交换机,类型为 内部 ,修改名称为 nat 在虚拟机的设置页面中,将网络适配器设置为新建的虚拟交换机 nat 打开win10->控制面板->网络和共享中 ...