vue 本地服务不能被外部IP访问的完美解决方法


Posted in Javascript onOctober 29, 2018

解决 webpack-dev-serveri 启动后通过外部访问报错 invalid host header

修改 config/index.js 的 host 属性为 ‘0.0.0.0'

{
// ...,
host: '0.0.0.0',
port: 8080,
// ...
}

修改 build/webpack.dev.conf.js 的 devServer 配置

增加 disableHostCheck = true

devServer: {
  clientLogLevel: 'warning',
  historyApiFallback: true,
  hot: true,
  compress: true,
  host: HOST || config.dev.host,
  port: PORT || config.dev.port,
  open: config.dev.autoOpenBrowser,
  overlay: config.dev.errorOverlay
   ? { warnings: false, errors: true }
   : false,
  publicPath: config.dev.assetsPublicPath,
  proxy: config.dev.proxyTable,
  quiet: true, // necessary for FriendlyErrorsPlugin
  disableHostCheck: true,
  watchOptions: {
   poll: config.dev.poll,
  }
 }

启动后就可以通过 IP 访问了,比如 IP 为 192.168.1.100

http://192.168.1.100:8080

PS:vue把localhost改成ip地址无法访问—解决方法

打开package.json文件,找到下面的代码

"scripts": {
  "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
  "start": "npm run dev",
  "build": "node build/build.js"
 },

改成

"scripts": {
  "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 192.168.0.114",
  "start": "npm run dev",
  "build": "node build/build.js"
 },

host后面是你的ip地址。

以上所述是小编给大家介绍的vue 本地服务不能被外部IP访问的解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS实现self的resend
Jul 22 Javascript
javasctipt如何显示几分钟前、几天前等
Apr 30 Javascript
JavaScript避免内存泄露及内存管理技巧
Sep 05 Javascript
jQuery 移动端artEditor富文本编辑器
Jan 11 Javascript
基于javascript实现表格的简单操作
May 21 Javascript
原生js实现自由拖拽弹窗代码demo
Jun 29 Javascript
通过扫描二维码打开app的实现代码
Nov 10 Javascript
JS数组排序方法实例分析
Dec 16 Javascript
BootStrap Table对前台页面表格的支持实例讲解
Dec 22 Javascript
jQuery实现锚点向下平滑滚动特效示例
Aug 29 jQuery
详解如何使用webpack打包JS
Jun 21 Javascript
javascript中闭包closure的深入讲解
Mar 03 Javascript
Webstorm2016使用技巧(SVN插件使用)
Oct 29 #Javascript
vue实现类似淘宝商品评价页面星级评价及上传多张图片功能
Oct 29 #Javascript
JS实现textarea通过换行或者回车把多行数字分割成数组并且去掉数组中空的值
Oct 29 #Javascript
简单说说angular.json文件的使用
Oct 29 #Javascript
JS 实现获取验证码 倒计时功能
Oct 29 #Javascript
浅析微信扫码登录原理(小结)
Oct 29 #Javascript
详解Node.js中path模块的resolve()和join()方法的区别
Oct 29 #Javascript
You might like
采集邮箱的php代码(抓取网页中的邮箱地址)
2012/07/17 PHP
解析PHP计算页面执行时间的实现代码
2013/06/18 PHP
php中stream(流)的用法
2014/03/25 PHP
PHP实现使用优酷土豆视频地址获取swf播放器分享地址
2014/06/05 PHP
简单介绍PHP的责任链编程模式
2015/08/11 PHP
jQuery 使用手册(四)
2009/09/23 Javascript
JS 自定义函数缺省值的设置方法
2010/05/05 Javascript
JavaScript实现两个Table固定表头根据页面大小自行调整
2014/01/03 Javascript
JavaScript实现在数组中查找不同顺序排列的字符串
2014/09/26 Javascript
jquery实现不包含当前项的选择器实例
2015/06/25 Javascript
js实现图片无缝滚动
2015/12/23 Javascript
jQuery实现定位滚动条位置
2016/08/05 Javascript
canvas实现绘制吃豆鱼效果
2017/01/12 Javascript
vue弹窗组件的实现示例代码
2018/09/10 Javascript
详解React项目如何修改打包地址(编译输出文件地址)
2019/03/21 Javascript
详解vue在项目中使用百度地图
2019/03/26 Javascript
vue中动态select的使用方法示例
2019/10/28 Javascript
vue iview的菜单组件Mune 点击不高亮的解决方案
2019/11/01 Javascript
微信小程序监听用户登录事件的实现方法
2019/11/11 Javascript
[59:07]海涛为你详解DOTA2新版本“贤哲秘契”
2014/11/22 DOTA
详解Python当中的字符串和编码
2015/04/25 Python
遍历python字典几种方法总结(推荐)
2016/09/11 Python
Python操作Excel之xlsx文件
2017/03/24 Python
Python SQLite3数据库日期与时间常见函数用法分析
2017/08/14 Python
python 利用pandas将arff文件转csv文件的方法
2019/02/12 Python
Python操作Excel工作簿的示例代码(\*.xlsx)
2020/03/23 Python
python 解决Windows平台上路径有空格的问题
2020/11/10 Python
加拿大在线隐形眼镜专家:PerfectLens.ca
2016/11/19 全球购物
Booking.com亚太地区:Booking.com APAC
2020/02/07 全球购物
简历中个人求职的自我评价模板
2013/11/29 职场文书
写自荐信的注意事项
2014/03/09 职场文书
洗发露广告词
2014/03/14 职场文书
社区学习雷锋活动总结
2014/04/25 职场文书
小马王观后感
2015/06/11 职场文书
MySQL系列之二 多实例配置
2021/07/02 MySQL
源码安装apache脚本部署过程详解
2022/09/23 Servers