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 相关文章推荐
根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码
Feb 22 Javascript
javascript:以前写的xmlhttp池,代码
May 18 Javascript
js+css实现增加表单可用性之提示文字
Jun 03 Javascript
面向对象设计模式的核心法则
Nov 10 Javascript
JS回调函数的应用简单实例
Sep 17 Javascript
ajax读取数据后使用jqchart显示图表的方法
Jun 10 Javascript
jQuery仿360导航页图标拖动排序效果代码分享
Aug 24 Javascript
bootstrap组件之导航组件使用方法
Jan 19 Javascript
js实现不提示直接关闭网页窗口
Mar 30 Javascript
JS+HTML5 FileReader实现文件上传前本地预览功能
Mar 27 Javascript
Vue中"This dependency was not found"问题的解决方法
Jun 19 Javascript
layui获取选中行数据的实例讲解
Aug 19 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
不支持fsockopen但支持culr环境下下ucenter与modoer通讯问题
2011/08/12 PHP
php判断用户是否手机访问代码
2015/06/08 PHP
PHP+MySQL存储数据常见中文乱码问题小结
2016/06/13 PHP
PHP7 新特性详细介绍
2016/09/06 PHP
imagettftext() 失效,不起作用
2021/03/09 PHP
繁简字转换功能
2006/07/19 Javascript
javascript控制swfObject应用介绍
2012/11/29 Javascript
仿百度输入框智能提示的js代码
2013/08/22 Javascript
jQuery修改CSS伪元素属性的方法
2014/07/30 Javascript
jquery实现左右滑动菜单效果代码
2015/08/27 Javascript
JavaScript脚本判断蜘蛛来源的方法
2015/09/22 Javascript
jQuery实现悬浮在右上角的网页客服效果代码
2015/10/24 Javascript
在AngularJS框架中处理数据建模的方式解析
2016/03/05 Javascript
JS在onclientclick里如何控制onclick的执行
2016/05/30 Javascript
jQuery实现表格奇偶行显示不同背景色 就这么简单
2017/03/13 Javascript
完美解决手机浏览器顶部下拉出现网页源或刷新的问题
2017/11/30 Javascript
angularJS的radio实现单项二选一的使用方法
2018/02/28 Javascript
js实现各浏览器全屏代码实例
2018/07/03 Javascript
js比较两个单独的数组或对象是否相等的实例代码
2019/04/28 Javascript
Python简单定义与使用字典dict的方法示例
2017/07/25 Python
Python判断文件和字符串编码类型的实例
2017/12/21 Python
python取数作为临时极大值(极小值)的方法
2018/10/15 Python
用Python将结果保存为xlsx的方法
2019/01/28 Python
Python计算时间间隔(精确到微妙)的代码实例
2019/02/26 Python
Django ORM 查询管理器源码解析
2019/08/05 Python
基于keras中的回调函数用法说明
2020/06/17 Python
python爬虫调度器用法及实例代码
2020/11/30 Python
H5新属性audio音频和video视频的控制详解(推荐)
2016/12/09 HTML / CSS
webView加载html图片遇到的问题解决
2019/10/08 HTML / CSS
英国领先的狗和宠物美容专家:Christies Direct
2017/04/03 全球购物
Timberland澳大利亚官网:全球领先的户外品牌
2019/12/10 全球购物
学生党员思想汇报范文
2014/01/09 职场文书
经典促销广告词大全
2014/03/19 职场文书
幼儿园大班教师个人工作总结
2015/02/05 职场文书
SQL 聚合、分组和排序
2021/11/11 MySQL
mysql5.7的安装及Navicate长久免费使用的实现过程
2021/11/17 MySQL