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 相关文章推荐
锋利的jQuery 要点归纳(二) jQuery中的DOM操作(下)
Mar 23 Javascript
在JavaScript中获取请求的URL参数[正则]
Dec 25 Javascript
js中查找最近的共有祖先元素的实现代码
Dec 30 Javascript
js中eval()函数和trim()去掉字符串左右空格应用
Feb 02 Javascript
jquery.ui.draggable中文文档(原文翻译)
Nov 15 Javascript
Jquery中扩展方法extend使用技巧
Aug 24 Javascript
JQuery右键菜单插件ContextMenu使用指南
Dec 19 Javascript
JavaScript操作HTML元素和样式的方法详解
Oct 21 Javascript
使用JS组件实现带ToolTip验证框的实例代码
Aug 23 Javascript
javaScript实现滚动条事件详解
Mar 24 Javascript
Vue CLI3基础学习之pages构建多页应用
Jun 02 Javascript
vue 数字翻牌器动态加载数据
Apr 20 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使之能同时支持GIF和JPEG
2006/10/09 PHP
PHP持久连接mysql_pconnect()函数使用介绍
2012/02/05 PHP
php面象对象数据库操作类实例
2014/12/02 PHP
PHP+Apache实现二级域名之间共享cookie的方法
2019/07/24 PHP
jQuery实现id模糊查询的小例子
2013/03/19 Javascript
js获取或设置当前窗口url参数的小例子
2013/10/14 Javascript
解析Javascript中中括号“[]”的多义性
2013/12/03 Javascript
JQuery中使用.each()遍历元素学习笔记
2014/11/08 Javascript
Jquery 实现checkbox全选方法
2015/01/28 Javascript
JS中关于事件处理函数名后面是否带括号的问题
2016/11/16 Javascript
js实现无缝滚动图(可控制当前滚动的方向)
2017/02/22 Javascript
在javaScript中检测数据类型的几种方式小结
2017/03/04 Javascript
jQuery选择器特殊字符与属性空格问题
2017/08/14 jQuery
浅谈Angular4中常用管道
2017/09/27 Javascript
Angular js 实现添加用户、修改密码、敏感字、下拉菜单的综合操作方法
2017/10/24 Javascript
简单了解JavaScript作用域
2020/07/31 Javascript
微信小程序自定义底部弹出框动画
2020/11/18 Javascript
vue中activated的用法
2021/01/03 Vue.js
python基础教程之序列详解
2014/08/29 Python
Python深入学习之闭包
2014/08/31 Python
Python利用Nagios增加微信报警通知的功能
2016/02/18 Python
Python实现mysql数据库更新表数据接口的功能
2017/11/19 Python
Python3中条件控制、循环与函数的简易教程
2017/11/21 Python
Python Numpy 控制台完全输出ndarray的实现
2020/02/19 Python
python闭包、深浅拷贝、垃圾回收、with语句知识点汇总
2020/03/11 Python
使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的方法
2014/04/03 HTML / CSS
shell变量的作用空间是什么
2013/08/17 面试题
住房公积金接收函
2014/01/09 职场文书
家长给老师的道歉信
2014/01/13 职场文书
知识竞赛活动方案
2014/02/18 职场文书
献爱心倡议书
2014/04/14 职场文书
我们的节日国庆活动方案
2014/08/19 职场文书
公务员检讨书
2014/11/01 职场文书
音乐教师求职信范文
2015/03/20 职场文书
工程催款通知书
2015/04/17 职场文书
迁徙的鸟观后感
2015/06/09 职场文书