EasyDSS高性能流媒体服务器前端重构(六)- webpack-dev-server 支持手机端访问
很多时候,前端开发的页面,不仅要在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需在同一局域网内哦.
关于EasyDSS
EasyDSS商用流媒体服务器解决方案是一套集流媒体点播、转码与管理、直播、录像、检索、时移回看于一体的一套完整的商用流媒体服务器解决方案,EasyDSS高性能RTMP流媒体服务器支持RTMP推流,同步输出HTTP、RTMP、HLS、HTTP-FLV,支持推流分发/拉流分发,支持秒开、GOP缓冲、录像、检索、回放、录像下载、网页管理等多种功能,是目前市面上最合理的一款商用流媒体服务器!
点击链接加入群【EasyDSS流媒体服务器】:560148162
获取更多信息
Copyright © EasyDarwin.org 2012-2017
相关文章
- SUSE Enterprise Server 12 SP3 64 设置防火墙开放8080端口,出现Unsafe permissions for file /etc/sysconfig/SuSEfirewall2 to be sourced
- Have smaller server identifier, so dropping the connection: (2, 1)
- Windows Server 2008 下ASP程序连接ORACLE数据库驱动错误
- 浅析SQL SERVER执行计划中的各类怪相
- [Webpack] Analyze a Production JavaScript Bundle with webpack-bundle-analyzer
- [Webpack] Create Separate webpack Configs for Development and Production with webpack-merge
- [WASM] Create a New Rust/Webpack Project using the rust-webpack Template
- [Webpack 2] Maintain sane file sizes with webpack code splitting
- [Webpack 2] Validate your Webpack config with webpack-validator
- SQL SERVER全面优化-------Expert for SQL Server 诊断系列
- Oracle Linux Server release 6.3 下安装JDK
- mysql server has gone away
- EasyDSS高性能RTMP、HLS(m3u8)、HTTP-FLV、RTSP流媒体服务器前端源码重构(六)- webpack-dev-server 自适应支持手机端访问
- [Webpack] Externalize Dependencies to be Loaded via CDN with webpack
- [Webpack] Detect Unused Code with Webpack and unused-files-webpack-plugin
- [WASM] Create a New Rust/Webpack Project using the rust-webpack Template
- [Webpack 2] Maintain sane file sizes with webpack code splitting
- SQL SERVER全面优化-------Expert for SQL Server 诊断系列
- SQL SERVER服务器链接连接(即sql server的跨库连接)
- SQL SERVER服务器链接连接(即sql server的跨库连接)
- Oracle与Sql Server差异点详解
- SQL SERVER服务器链接连接(即sql server的跨库连接)
- 如何找出Fiori frontend server的systen ID
- win server 2008 r2 iis+php 500错误内部服务器错误。
- 启动tomcat时 错误: 代理抛出异常 : java.rmi.server.ExportException: Port already in use: 1099的解决办法
- eclipse tomcat add时提示The Tomcat server configuration at ServersTomcat v6.0 Server at localhost-
- hadoop 开始时间datanode一个错误 Problem connecting to server
- 0402-服务注册与发现-Eureka Server使用、将服务注册到Eureka server上
- SQL Server未找到或无法訪问server问题解决
- Golang服务器热重启、热升级、热更新(safe and graceful hot-restart/reload http server)详解
- SQL server多表联合查询
- 从零开始手写Tomcat的教程14节----服务器组件(Server)和服务组件(Service)
- 麒麟KylinOS Server修改密码复杂度