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 toggle()设置CSS样式
Nov 05 Javascript
基于jquery的图片懒加载js
Jun 30 Javascript
jquery实现仿JqueryUi可拖动的DIV实例
Jul 31 Javascript
js获取元素的外链样式的简单实现方法
Jun 06 Javascript
用JS中split方法实现彩色文字背景效果实例
Aug 24 Javascript
jQuery实现弹出窗口弹出div层的实例代码
Jan 09 Javascript
JS检测数组类型的方法小结
Mar 14 Javascript
关于react-router的几种配置方式详解
Jul 24 Javascript
微信小程序实现action-sheet弹出底部菜单功能【附源码下载】
Dec 09 Javascript
详解vue数组遍历方法forEach和map的原理解析和实际应用
Nov 15 Javascript
Vue实现商品飞入购物车效果(电商项目)
Nov 26 Javascript
JS实现简单的九宫格抽奖
Jun 28 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
将数组写入txt文件 var_export
2009/04/21 PHP
PHP程序员面试 切忌急功近利(更需要注重以后的发展)
2010/09/01 PHP
PHP截断标题且兼容utf8和gb2312编码
2013/09/22 PHP
ThinkPHP模板之变量输出、自定义函数与判断语句用法
2014/11/01 PHP
刷新时清空文本框内容的js代码
2007/04/23 Javascript
JavaScript高级程序设计阅读笔记(六) ECMAScript中的运算符(二)
2012/02/27 Javascript
jquery表单验证使用插件formValidator
2012/11/10 Javascript
JQuery为textarea添加maxlength属性并且兼容IE
2013/04/25 Javascript
Javascript Web Slider 焦点图示例源码
2013/10/10 Javascript
javascript中不等于的代码是什么怎么写
2013/12/29 Javascript
node.js中的fs.exists方法使用说明
2014/12/17 Javascript
JavaScript使用shift方法移除素组第一个元素实例分析
2015/04/06 Javascript
jQuery插件pagination实现分页特效
2015/04/12 Javascript
jQuery+css3实现转动的正方形效果(附demo源码下载)
2016/01/27 Javascript
JS判断输入字符串长度实例代码(汉字算两个字符,字母数字算一个)
2016/08/02 Javascript
javascript实现下雨效果
2017/03/27 Javascript
vue webuploader 文件上传组件开发
2017/09/23 Javascript
bootstrap 弹出框modal添加垂直方向滚轴效果
2018/07/09 Javascript
vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解
2020/04/28 Javascript
python实现得到一个给定类的虚函数
2014/09/28 Python
Python获取邮件地址的方法
2015/07/10 Python
Django框架中render_to_response()函数的使用方法
2015/07/16 Python
python实现简单飞行棋
2020/02/06 Python
Python post请求实现代码实例
2020/02/28 Python
Python requests接口测试实现代码
2020/09/08 Python
全球领先美式家具品牌:Ashley爱室丽家居
2017/08/07 全球购物
Nip + Fab官网:英国美容品牌
2019/08/26 全球购物
正宗的日本零食和糖果订阅盒:Bokksu
2019/11/21 全球购物
花卉与景观设计系大学生求职信
2013/10/01 职场文书
办公室前台岗位职责
2014/01/04 职场文书
数控技术应用个人求职信范文
2014/02/03 职场文书
跑操口号
2014/06/12 职场文书
基层工作经验证明样本
2014/11/16 职场文书
小学教师个人总结
2015/02/05 职场文书
技术员岗位职责范本
2015/04/11 职场文书
2019 入党申请书范文
2019/07/10 职场文书