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 json2 使用方法
Mar 16 Javascript
JS DOM 操作实现代码
Aug 01 Javascript
缓动函数requestAnimationFrame 更好的实现浏览器经动画
Dec 07 Javascript
JAVA四种基本排序方法实例总结
Jul 24 Javascript
angularjs学习笔记之简单介绍
Sep 26 Javascript
基于JS实现的笛卡尔乘积之商品发布
May 13 Javascript
实例讲解JavaScript中call、apply、bind方法的异同
Sep 13 Javascript
ReactJS实现表单的单选多选和反选的示例
Oct 13 Javascript
vue+axios新手实践实现登陆的示例代码
Jun 06 Javascript
vue使用高德地图点击下钻上浮效果的实现思路
Oct 12 Javascript
VUEX-action可以修改state吗
Nov 19 Javascript
vue项目在线上服务器访问失败原因分析
Aug 14 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
业余方法DIY电子管FM收音机
2021/03/02 无线电
PHP语言中global和$GLOBALS[]的分析 之二
2012/02/02 PHP
PHP检测字符串是否为UTF8编码的常用方法
2014/11/21 PHP
PHP将字符分解为多个字符串的方法
2014/11/22 PHP
PHP的curl函数的用法总结
2019/02/14 PHP
弹出广告特效代码(一个IP只弹出一次)
2007/05/11 Javascript
Javascript之this关键字深入解析
2013/11/12 Javascript
JavaSciprt中处理字符串之sup()方法的使用教程
2015/06/08 Javascript
javascript最基本的函数汇总
2015/06/25 Javascript
IE9+已经不对document.createElement向下兼容的解决方法
2015/09/14 Javascript
AngularJS 使用 UI Router 实现表单向导
2016/01/29 Javascript
KnockoutJS 3.X API 第四章之数据控制流component绑定
2016/10/10 Javascript
关于jQuery里prev()的简单操作代码
2017/10/27 jQuery
使用ef6创建oracle数据库的实体模型遇到的问题及解决方案
2017/11/09 Javascript
浅谈使用React.setState需要注意的三点
2017/12/18 Javascript
在vue使用clipboard.js进行一键复制文本的实现示例
2019/01/15 Javascript
Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能详解
2020/04/29 Javascript
Python中使用item()方法遍历字典的例子
2014/08/26 Python
PyQt5每天必学之单行文本框
2018/04/19 Python
Django model 中设置联合约束和联合索引的方法
2019/08/06 Python
python实现opencv+scoket网络实时图传
2020/03/20 Python
使用python批量转换文件编码为UTF-8的实现
2020/04/03 Python
Python3 用matplotlib绘制sigmoid函数的案例
2020/12/11 Python
护士自我鉴定范文
2013/10/06 职场文书
施工协议书范本
2014/04/22 职场文书
大学生工作自荐书
2014/06/16 职场文书
工作所在部门证明
2014/09/21 职场文书
分居协议书范本
2014/11/03 职场文书
离职报告格式
2014/11/04 职场文书
逃出克隆岛观后感
2015/06/09 职场文书
详解Python中的进程和线程
2021/06/23 Python
Python卷积神经网络图片分类框架详解分析
2021/11/07 Python
windows11怎么查看自己安装的版本号? win11版本号的查看方法
2021/11/21 数码科技
pytorch中的torch.nn.Conv2d()函数图文详解
2022/02/28 Python
微信小程序APP页面的之间的相互传递参数以及自定义组件
2022/04/19 Javascript
微信小程序 根据不同用户切换不同TabBar
2022/04/21 Javascript