EasyDSS高性能流媒体服务器前端重构(六)- webpack-dev-server 支持手机端访问
来源:互联网 发布:mongodb删除数据 编辑:程序博客网 时间:2024/06/07 06:09
很多时候,前端开发的页面,不仅要在PC端测试效果, 还要在手机端测试效果. 在开发阶段, 我们以 webpack-dev-server 来启动浏览器, 打开正在开发的页面. webpack-dev-server 可以做到实时监听文件修改, 自动更新浏览器中的网页, 一旦代码发生修改, 无须人工干预, 页面就同步到最新状态. 但是 webpack-dev-server 的默认配置, 不充许本机以外的设备访问开发页面, 这个时候, 当我们用手机通过局域网IP来访问页面时, 连接不上. 于是, 去官网文档里寻找解决之道. webpack 的官网文档给我的印象是乱乱的, 和其他一些内容混在一块.
这里, 我记录下 webpack-dev-server 开启手机内网访问页面的配置过程. 一来给自己留个记录; 二来, 方便大家搜索, 在官网文档以外的地方, 很快的搜到这个问题的答案.
要让 webpack-dev-server 支持手机端通过内网IP访问, 只需要在 webpack.config.js 中添加如下配置段:
... devServer: { host: '0.0.0.0', useLocalIp: true, open: true, openPage: "", proxy: { "*": { target: 'http://xxx', secure: false } } }, ...
关键的配置属性:
host 配置成 ‘0.0.0.0’, 充许本机以外的设备访问
useLocalIp true, 将以内网IP为http地址信息打开浏览器, 不用敲 cmd ipinfo 去查内网IP了
通过以上配置, 直接在命令行敲 webpack-dev-server
将打开的浏览器地址栏地址发送到手机上, 就可以从手机访问测试页面了. 当然, 手机和PC需在同一局域网内哦.
阅读全文
0 0
- EasyDSS高性能流媒体服务器前端重构(六)- webpack-dev-server 支持手机端访问
- EasyDSS高性能流媒体服务器前端重构(六)- webpack-dev-server 支持手机端访问
- EasyDSS高性能流媒体服务器前端重构(四): webpack + video.js 打造流媒体服务器前端
- 高性能流媒体服务器EasyDSS前端重构(四)- webpack + video.js 打造流媒体服务器前端
- EasyDSS高性能流媒体服务器前端重构(五): webpack + vue-router 开发单页面前端实现按需加载
- EasyDSS高性能流媒体服务器前端重构(五)- webpack + vue-router 开发单页面前端实现按需加载
- EasyDSS高性能流媒体服务器前端重构(一):从零开始搭建 webpack + vue + AdminLTE 多页面脚手架
- EasyDSS高性能流媒体服务器前端重构(二) webpack + vue + AdminLTE 多页面提取共用文件, 优化编译时间
- EasyDSS高性能流媒体服务器前端重构(三): webpack + vue + AdminLTE 多页面引入 element-ui
- 高性能流媒体服务器EasyDSS前端重构(一)-从零开始搭建 webpack + vue + AdminLTE 多页面脚手架
- 高性能流媒体服务器EasyDSS前端重构(二) webpack + vue + AdminLTE 多页面提取共用文件, 优化编译时间
- 高性能流媒体服务器EasyDSS前端重构(三)- webpack + vue + AdminLTE 多页面引入 element-ui
- easyNVR连接easyDSS流媒体服务器
- webpack-dev-server 支持 react-router BrowserHistory
- webpack dev server 局域网内访问
- webpack-dev-server 只能通过 localhost 访问?
- EasyDSS RTMP流媒体服务器搭建直播集群
- EasyDarwin流媒体服务器高性能优化方向
- Dlib库介绍(一)
- BigDecimal加减乘除运算
- 反射_程序集_额外补充
- MySQL分区表
- 浮动原理及清浮动笔记
- EasyDSS高性能流媒体服务器前端重构(六)- webpack-dev-server 支持手机端访问
- 字符串匹配问题解决方案之一KMP算法
- 图片标注工具LabelImg使用教程
- register_chrdev & unregister_chrdev
- HTML
- RpgMakerMV源码解析(1)-输入管理
- 谷歌搜索技巧
- 排序算法的Java实现+思路(一):冒泡、快排
- (HDU