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的ajax功能实现的RSS Reader 代码
Sep 03 Javascript
Javascript中的五种数据类型详解
Dec 26 Javascript
javascript面向对象程序设计(一)
Jan 29 Javascript
早该知道的7个JavaScript技巧
Jun 21 Javascript
JavaScript中Form表单技术汇总(推荐)
Jun 26 Javascript
js Canvas绘制圆形时钟教程
Feb 06 Javascript
Three.js基础学习教程
Nov 16 Javascript
vue 使用eventBus实现同级组件的通讯
Mar 02 Javascript
react redux入门示例
Apr 19 Javascript
JavaScript事件对象深入详解
Dec 30 Javascript
vue插槽slot的简单理解与用法实例分析
Mar 14 Javascript
VUE+Element实现增删改查的示例源码
Nov 23 Vue.js
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
set_include_path在win和linux下的区别
2008/01/10 PHP
php checkbox 取值详细说明
2010/08/19 PHP
php 模拟POST提交的2种方法详解
2013/06/17 PHP
PHP中使用循环实现的金字塔图形
2014/11/08 PHP
PHP中使用hidef扩展代替define提高性能
2015/04/09 PHP
PHP计算加权平均数的方法
2015/07/16 PHP
WordPress开发中短代码的实现及相关函数使用技巧
2016/01/05 PHP
php魔术方法功能与用法实例分析
2016/10/19 PHP
传递参数的标准方法(jQuery.ajax)
2008/11/19 Javascript
javascript hashtable实现代码
2009/10/13 Javascript
深入理解JavaScript系列(7) S.O.L.I.D五大原则之开闭原则OCP
2012/01/15 Javascript
JS将秒换成时分秒实现代码
2013/09/03 Javascript
node.js中的fs.stat方法使用说明
2014/12/16 Javascript
JavaScript实现Flash炫光波动特效
2015/05/14 Javascript
JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】
2016/05/10 Javascript
jQuery筛选数组之grep、each、inArray、map的用法及遍历json对象
2016/06/20 Javascript
jQuery扩展实现text提示还能输入多少字节的方法
2016/11/28 Javascript
限时抢购-倒计时的完整实例(分享)
2017/09/17 Javascript
Vue的elementUI实现自定义主题方法
2018/02/23 Javascript
使用Vue父子组件通信实现todolist的功能示例代码
2019/04/11 Javascript
[36:17]DOTA2上海特级锦标赛 - VGL音乐会全集
2016/03/06 DOTA
Python中对列表排序实例
2015/01/04 Python
tensorflow之tf.record实现存浮点数数组
2020/02/17 Python
jupyter notebook 实现matplotlib图动态刷新
2020/04/22 Python
基于Python模拟浏览器发送http请求
2020/11/06 Python
css3实现可滑动跳转的分页插件示例
2014/05/08 HTML / CSS
英国在线泳装店:Simply Swim
2019/05/05 全球购物
波兰最大的宠物用品网上商店:FERA.PL
2019/08/11 全球购物
英国最大的在线快递公司之一:ParcelHero
2019/11/04 全球购物
.net面试题
2016/09/17 面试题
个人思想理论学习的自我鉴定
2013/11/30 职场文书
新学期红领巾广播稿
2014/10/04 职场文书
2015年材料员工作总结
2015/04/30 职场文书
浅谈python中的多态
2021/06/15 Python
MongoDB 常用的crud操作语句
2021/06/20 MongoDB
SQL CASE 表达式的具体使用
2022/03/21 SQL Server