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 插件 将this下的div轮番显示
Apr 09 Javascript
实现点击列表弹出列表索引的两种方式
Mar 08 Javascript
iframe子父页面调用js函数示例
Nov 07 Javascript
javascript实现3D变换的立体圆圈实例
Aug 06 Javascript
微信小程序 缓存(本地缓存、异步缓存、同步缓存)详解
Jan 17 Javascript
Bootstrap面板学习使用
Feb 09 Javascript
JS图片预加载插件详解
Jun 21 Javascript
require.js 加载过程与使用方法介绍
Oct 30 Javascript
jQuery AJAX与jQuery事件的分析讲解
Feb 18 jQuery
vue-video-player 断点续播的实现
Feb 01 Vue.js
Angular CLI发布路径的配置项浅析
Mar 29 Javascript
如何制作自己的原生JavaScript路由
May 05 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的explode和implode的使用说明
2011/07/17 PHP
ThinkPHP中的关联模型注意点
2014/06/16 PHP
PHP仿tp实现mvc框架基本设计思路与实现方法分析
2018/05/23 PHP
Yii实现微信公众号场景二维码的方法实例
2020/08/30 PHP
不用AJAX和IFRAME,说说真正意义上的ASP+JS无刷新技术
2008/09/25 Javascript
jQuery删除一个元素后淡出效果展示删除过程的方法
2015/03/18 Javascript
Javascript中的return作用及javascript return关键字用法详解
2015/11/05 Javascript
JS实现控制文本框的内容
2016/07/10 Javascript
mvc中form表单提交的三种方式(推荐)
2016/08/10 Javascript
RGB和YUV 多媒体编程基础详细介绍
2016/11/04 Javascript
最常见的左侧分类菜单栏jQuery实现代码
2016/11/28 Javascript
原生JS中slice()方法和splice()区别
2017/03/06 Javascript
深入理解Webpack 中路径的配置
2017/06/17 Javascript
基于jQuery选择器之表单对象属性筛选选择器的实例
2017/09/19 jQuery
小程序文字跑马灯效果
2018/12/28 Javascript
vue cli3.0 引入eslint 结合vscode使用
2019/05/27 Javascript
微信小程序实现星级评价
2019/11/20 Javascript
基于Echarts图表在div动态切换时不显示的解决方式
2020/07/20 Javascript
python内存管理分析
2015/04/08 Python
django celery redis使用具体实践
2019/04/08 Python
Python转换时间的图文方法
2019/07/01 Python
Python中新式类与经典类的区别详析
2019/07/10 Python
Python 使用指定的网卡发送HTTP请求的实例
2019/08/21 Python
使用Python paramiko模块利用多线程实现ssh并发执行操作
2019/12/05 Python
如何基于pythonnet调用halcon脚本
2020/01/20 Python
python数据库操作mysql:pymysql、sqlalchemy常见用法详解
2020/03/30 Python
解决使用Pandas 读取超过65536行的Excel文件问题
2020/11/10 Python
Manuka Doctor英国官网:真正的麦卢卡蜂蜜和护肤品
2018/10/26 全球购物
美国便宜的横幅和标志印刷在线:Best of Signs
2019/05/29 全球购物
街头时尚在线:JESSICABUURMAN
2019/06/16 全球购物
商务助理求职信范文
2014/04/20 职场文书
师范学院毕业生求职信
2014/06/24 职场文书
对领导班子的意见和建议
2015/06/08 职场文书
高考百日冲刺决心书
2015/09/23 职场文书
《花钟》教学反思
2016/02/17 职场文书
Oracle安装TNS_ADMIN环境变量设置参考
2021/11/01 Oracle