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作者John Resig自己封装的javascript 常用函数
Nov 09 Javascript
js中关于String对象的replace使用详解
May 24 Javascript
Js获取数组最大和最小值示例代码
Oct 29 Javascript
深入理解JQuery keyUp和keyDown的区别
Dec 12 Javascript
Javascript优化技巧之短路表达式详细介绍
Mar 27 Javascript
JS实现霓虹灯文字效果的方法
Aug 06 Javascript
asp.net中oracle 存储过程(图文)
Aug 12 Javascript
JS中setTimeout的巧妙用法前端函数节流
Mar 24 Javascript
深究AngularJS中ng-drag、ng-drop的用法
Jun 12 Javascript
ionic2屏幕适配实现适配手机、平板等设备的示例代码
Aug 11 Javascript
详解Vue中watch的详细用法
Nov 28 Javascript
vue实现鼠标移过出现下拉二级菜单功能
Dec 12 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
解析smarty 截取字符串函数 truncate的用法介绍
2013/06/20 PHP
PHP实现支持GET,POST,Multipart/form-data的HTTP请求类
2014/09/24 PHP
php 模拟 asp.net webFrom 按钮提交事件实例
2014/10/13 PHP
详解PHP错误日志的获取方法
2015/07/20 PHP
用js重建星际争霸
2006/12/22 Javascript
javascript编程起步(第七课)
2007/02/27 Javascript
jquery 表格分页等操作实现代码(pagedown,pageup)
2010/04/11 Javascript
也说JavaScript中String类的replace函数
2011/09/22 Javascript
javascript jscroll模拟html元素滚动条
2012/12/18 Javascript
Javascript 实现图片无缝滚动
2014/12/19 Javascript
jQuery中:text选择器用法实例
2015/01/03 Javascript
JavaScript encodeURI 和encodeURIComponent
2015/12/04 Javascript
JavaScript实现的CRC32函数示例
2016/11/23 Javascript
JavaScript实现多栏目切换效果
2016/12/12 Javascript
vue 运用mock数据的示例代码
2017/11/07 Javascript
js如何实现元素曝光上报
2019/08/07 Javascript
ssm+vue前后端分离框架整合实现(附源码)
2020/07/08 Javascript
Vue中正确使用Element-UI组件的方法实例
2020/10/13 Javascript
vscode自定义vue模板的实现
2021/01/27 Vue.js
[02:53]DOTA2英雄基础教程 山岭巨人小小
2013/12/09 DOTA
[00:14]PWL:老朋友Mushi拍VLOG与中国玩家问好
2020/11/04 DOTA
python实现数组插入新元素的方法
2015/05/22 Python
PyQt5实现拖放功能
2018/04/25 Python
对pandas通过索引提取dataframe的行方法详解
2019/02/01 Python
python实现翻译word表格小程序
2020/02/27 Python
解决pycharm中opencv-python导入cv2后无法自动补全的问题(不用作任何文件上的修改)
2020/03/05 Python
keras slice layer 层实现方式
2020/06/11 Python
Python用摘要算法生成token及检验token的示例代码
2020/12/01 Python
CSS3 实现图形下落动画效果
2020/11/13 HTML / CSS
美国鲍勃商店:Bob’s Stores
2018/07/22 全球购物
Omio葡萄牙:全欧洲低价大巴、火车和航班搜索和比价
2019/02/09 全球购物
竞选大队干部演讲稿
2014/09/11 职场文书
团队会宣传标语
2014/10/09 职场文书
小学少先队活动总结
2015/05/08 职场文书
Java基础之线程锁相关知识总结
2021/06/30 Java/Android
Redis调用Lua脚本及使用场景快速掌握
2022/03/16 Redis