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 相关文章推荐
javascript 尚未实现错误解决办法
Nov 27 Javascript
判断用户的在线状态 onbeforeunload事件
Mar 05 Javascript
JQuery给select添加/删除节点的实现代码
Apr 26 Javascript
JS实现弹出居中的模式窗口示例
Jun 20 Javascript
KnockoutJS 3.X API 第四章之数据控制流component绑定
Oct 10 Javascript
vuejs绑定class和style样式
Apr 11 Javascript
JavaScript实现修改伪类样式
Nov 27 Javascript
Node.js readline 逐行读取、写入文件内容的示例
Mar 01 Javascript
微信小程序实现折叠展开效果
Jul 19 Javascript
javascript中UMD规范的代码推演
Aug 29 Javascript
JavaScript中Dom操作实例详解
Jul 08 Javascript
vue离开当前页面触发的函数代码
Sep 01 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
在线竞拍系统的PHP实现框架(一)
2006/10/09 PHP
php计算十二星座的函数代码
2012/08/21 PHP
CentOS7.0下安装PHP5.6.30服务的教程详解
2018/09/29 PHP
javascript 动态table添加colspan\rowspan 参数的方法
2009/07/25 Javascript
Jquery 获取表单text,areatext,radio,checkbox,select值的代码
2009/11/12 Javascript
jQuery循环滚动展示代码 可应用到文字和图片上
2012/05/11 Javascript
JS链式调用的实现方法
2013/03/07 Javascript
jQuery图片切换插件jquery.cycle.js使用示例
2014/06/16 Javascript
javascript连续赋值问题
2015/07/08 Javascript
JS组件Bootstrap实现弹出框和提示框效果代码
2015/12/08 Javascript
CSS或者JS实现鼠标悬停显示另一元素
2016/01/22 Javascript
JS定义类的六种方式详解
2016/05/12 Javascript
angular5 httpclient的示例实战
2018/03/12 Javascript
Node.js 使用jade模板引擎的示例
2018/05/11 Javascript
微信小程序实现折叠与展开文章功能
2018/06/12 Javascript
node中的session的具体使用
2018/09/14 Javascript
微信小程序实现动态显示和隐藏某个控件功能示例
2018/12/14 Javascript
利用原生JS实现data方法示例代码
2019/05/28 Javascript
微信小程序下拉框搜索功能的实现方法
2019/07/31 Javascript
使用preload预加载页面资源时注意事项
2020/02/03 Javascript
解决ant design vue中树形控件defaultExpandAll设置无效的问题
2020/10/26 Javascript
详解Python的迭代器、生成器以及相关的itertools包
2015/04/02 Python
Python黑帽编程 3.4 跨越VLAN详解
2016/09/28 Python
浅谈pandas中DataFrame关于显示值省略的解决方法
2018/04/08 Python
Python语言检测模块langid和langdetect的使用实例
2019/02/19 Python
Python制作词云图代码实例
2019/09/09 Python
python 数据分析实现长宽格式的转换
2020/05/18 Python
关于HTML5的22个初级技巧(图文教程)
2012/06/21 HTML / CSS
DVF官方网站:美国时装界尊尚品牌
2017/08/29 全球购物
安全隐患整改报告
2014/11/06 职场文书
担保书格式
2015/01/20 职场文书
同学聚会感言一句话
2015/07/30 职场文书
担保书怎么写 ?
2019/04/22 职场文书
公文写作指导之倡议书!
2019/07/03 职场文书
vue中 this.$set的使用详解
2021/11/17 Vue.js
pandas中pd.groupby()的用法详解
2022/06/16 Python