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 相关文章推荐
flash javascript之间的通讯方法小结
Dec 20 Javascript
在JavaScript里嵌入大量字符串常量的实现方法
Jul 07 Javascript
jQuery循环滚动新闻列表示例代码
Jun 17 Javascript
jQuery实现网页顶部固定导航效果代码
Dec 24 Javascript
JS封装通过className获取元素的函数示例
Dec 20 Javascript
Angular17之Angular自定义指令详解
Jan 21 Javascript
node.js ws模块搭建websocket服务端的方法示例
Apr 25 Javascript
layui 数据表格 点击分页按钮 监听事件的实例
Sep 02 Javascript
微信自定义分享链接信息(标题,图片和内容)实现过程详解
Sep 04 Javascript
vue在线动态切换主题色方案
Mar 26 Javascript
Vue使用Proxy代理后仍无法生效的解决
Nov 13 Javascript
vue如何实现关闭对话框后刷新列表
Apr 08 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中经典方法实现判断多维数组是否为空
2011/10/23 PHP
深入解析yii权限分级式访问控制的实现(非RBAC法)
2013/06/13 PHP
laravel-admin 管理平台获取当前登陆用户信息的例子
2019/10/08 PHP
javascript 面向对象思想 附源码
2009/07/07 Javascript
js 刷新页面的代码小结 推荐
2010/04/02 Javascript
jquery formValidator插件ajax验证 内容不做任何修改再离开提示错误的bug解决方法
2013/01/04 Javascript
Js 去掉字符串中的空格(实现代码)
2013/11/19 Javascript
使用JavaScript链式编程实现模拟Jquery函数
2014/12/21 Javascript
jQuery中$.each使用详解
2015/01/29 Javascript
JavaScript中解析JSON数据的三种方法
2015/07/03 Javascript
coffeescript使用的方式汇总
2015/08/05 Javascript
Vue.js开发环境搭建
2016/11/10 Javascript
详解JavaScript中的六种错误类型
2017/09/21 Javascript
微信小程序实现通过双向滑动缩放图片大小的方法
2018/12/30 Javascript
Vue和React组件之间的传值方式详解
2019/01/31 Javascript
javascript获取select值的方法完整实例
2019/06/20 Javascript
[01:01:18]VP vs NIP 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
[52:20]DOTA2-DPC中国联赛正赛 SAG vs XGBO3 第一场 3月5日
2021/03/11 DOTA
在Python的struct模块中进行数据格式转换的方法
2015/06/17 Python
Python 装饰器深入理解
2017/03/16 Python
解决pandas.DataFrame.fillna 填充Nan失败的问题
2018/11/06 Python
Python高斯消除矩阵
2019/01/02 Python
解决jupyter运行pyqt代码内核重启的问题
2020/04/16 Python
意大利在线药房:shop-farmacia.it
2019/03/12 全球购物
size?爱尔兰官方网站:英国伦敦的球鞋精品店
2019/03/31 全球购物
农业大学毕业生的个人自我评价
2013/10/11 职场文书
syb养殖创业计划书
2014/01/09 职场文书
会计电算化个人求职信范文
2014/01/24 职场文书
新闻工作者先进事迹
2014/05/26 职场文书
松材线虫病防治方案
2014/06/15 职场文书
关于青春的演讲稿500字
2014/08/22 职场文书
2014年节能减排工作总结
2014/12/06 职场文书
2015年班长个人工作总结
2015/04/03 职场文书
广播稿:校园广播稿范文
2019/04/17 职场文书
pytorch中的model.eval()和BN层的使用
2021/05/22 Python
Nginx速查手册及常见问题
2022/04/07 Servers