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 相关文章推荐
javascript显示倒计时控制按钮的简单实现
Jun 07 Javascript
vue v-on监听事件详解
May 17 Javascript
详解vue slot插槽的使用方法
Jun 13 Javascript
Angularjs渲染的 using 指令的星级评分系统示例
Nov 09 Javascript
仿淘宝JSsearch搜索下拉深度用法
Jan 15 Javascript
基于jquery的on和click的区别详解
Jan 15 jQuery
微信小程序支付前端源码
Aug 29 Javascript
webpack4实现不同的导出类型
Apr 09 Javascript
微信小程序实现图片翻转效果的实例代码
Sep 20 Javascript
优化Vue中date format的性能详解
Jan 13 Javascript
vue自定义树状结构图的实现方法
Oct 18 Javascript
vue 表单输入框不支持focus及blur事件的解决方案
Nov 17 Vue.js
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逐行输出(ob_flush与flush的组合)
2012/02/04 PHP
解密ThinkPHP3.1.2版本之模板继承
2014/06/19 PHP
destoon在360浏览器下出现用户被强行注销的解决方法
2014/06/26 PHP
Zend Framework动作助手(Zend_Controller_Action_Helper)用法详解
2016/03/05 PHP
seaJs的模块定义和模块加载浅析
2014/06/06 Javascript
JS获取图片lowsrc属性的方法
2015/04/01 Javascript
js实现选中复选框文字变色的方法
2015/08/14 Javascript
jquery trigger实现联动的方法
2016/02/29 Javascript
Angular的MVC和作用域
2016/12/26 Javascript
js与jQuery实现获取table中的数据并拼成json字符串操作示例
2018/07/12 jQuery
vue项目实现表单登录页保存账号和密码到cookie功能
2018/08/31 Javascript
Iview Table组件中各种组件扩展的使用
2018/10/20 Javascript
解决layer.confirm选择完之后消息框不消失的问题
2019/09/16 Javascript
梳理一下vue中的生命周期
2020/12/30 Vue.js
[05:41]2014DOTA2西雅图国际邀请赛 小组赛7月10日TOPPLAY
2014/07/10 DOTA
[01:04:31]DOTA2-DPC中国联赛定级赛 iG vs Magma BO3第二场 1月8日
2021/03/11 DOTA
浅谈Python黑帽子取代netcat
2018/02/10 Python
Python实现合并两个列表的方法分析
2018/05/28 Python
python中多层嵌套列表的拆分方法
2018/07/02 Python
python操作excel文件并输出txt文件的实例
2018/07/10 Python
详解解决Python memory error的问题(四种解决方案)
2019/08/08 Python
python操作openpyxl导出Excel 设置单元格格式及合并处理代码实例
2019/08/27 Python
Django框架反向解析操作详解
2019/11/28 Python
Python 如何反方向迭代一个序列
2020/07/28 Python
Html5页面中的返回实现的方法
2018/02/26 HTML / CSS
俄罗斯在线大型超市:ТутПросто
2021/01/08 全球购物
大学英语演讲稿(中英文对照)
2014/01/14 职场文书
上课打牌的检讨书
2014/02/15 职场文书
函授本科个人自我鉴定
2014/03/25 职场文书
优秀会计求职信
2014/07/04 职场文书
2014年德育工作总结
2014/11/20 职场文书
教师先进个人材料
2014/12/17 职场文书
武侯祠导游词
2015/02/04 职场文书
甲午风云观后感
2015/06/02 职场文书
一波干货,会议主持词开场白范文
2019/05/06 职场文书
JavaScript实现外溢动态爱心的效果的示例代码
2022/03/21 Javascript