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. kubernetes concepts -- Pod Overview

    This page provides an overview of Pod, the smallest deployable object in the Kubernetes object model ...

  2. python 线程事件

    与进程的事件相似 # 事件,模拟连接数据库 import time from threading import Event, Thread def wait(e): while 1: e.wait(1 ...

  3. redis 5种类型

    redis可以不严谨的看成: redis: { name: value, name: value, } value的数据类型: 1.字典 2.列表 3.字符串 4.集合 5.有序集合 注意: redi ...

  4. Java单体应用 - Markdown - 02.基础语法

    原文地址:http://www.work100.net/training/monolithic-markdown-basic.html 更多教程:光束云 - 免费课程 基础语法 序号 文内章节 视频 ...

  5. [bzoj1041] [洛谷P2508] [HAOI2008] 圆上的整点

    Description 求一个给定的圆(x^2+y^2=r^2),在圆周上有多少个点的坐标是整数. Input 只有一个正整数n,n<=2000 000 000 Output 整点个数 Samp ...

  6. ES6笔记分享 part 1

    ECMAScript ES6 从一脸懵逼到灵活运用 var let const var let const 的比较 声明与赋值 var声明的变量是可以重新赋值的,也可以重复声明 let和const声明 ...

  7. vue响应式原理的实现

    响应式实现的原理---如何监控数据的变化:两种方法 Vue 2.x defineProperty(es5) Vue 3.x Proxy(es6) 语法:Object.defineProperty(参数 ...

  8. 保存网页内容到excel

    from selenium import webdriverfrom time import sleepfrom selenium.common.exceptions import NoSuchEle ...

  9. 使用c++标准IO库实现txt文本文件的读与写操作

    练习c++primer中关于输入输出流的操作. 任务是从固定格式的forreading.txt文档中读取相应的数据,转存到forwriting.txt中去. forreading.txt 格式如下: ...

  10. CUDA学习(五)之使用共享内存(shared memory)进行归约求和(一个包含N个线程的线程块)

    共享内存(shared memory)是位于SM上的on-chip(片上)一块内存,每个SM都有,就是内存比较小,早期的GPU只有16K(16384),现在生产的GPU一般都是48K(49152). ...