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 DOM操作 基于命令改变页面
May 06 Javascript
基于jquery的让textarea自适应高度的插件
Aug 03 Javascript
关于innerHTML后丢失动态绑定的EVENT问题解决方法
May 19 Javascript
全面兼容的javascript时间格式化函数(比较实用)
May 14 Javascript
JavaScript中的跨浏览器事件操作的基本方法整理
May 20 Javascript
完美实现js焦点轮播效果(一)
Mar 07 Javascript
利用Jasmine对Angular进行单元测试的方法详解
Jun 12 Javascript
深入讲解xhr(XMLHttpRequest)/jsonp请求之abort
Jul 26 Javascript
vue服务端渲染操作简单入门实例分析
Aug 28 Javascript
JavaScript 斐波那契数列 倒序输出 输出100以内的质数代码实例
Sep 11 Javascript
如何解决jQuery 和其他JS库的冲突
Jun 22 jQuery
js实现随机点名
Jan 19 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
《魔兽世界》惊魂幻象将获得调整
2020/03/08 其他游戏
基于数据库的在线人数,日访问量等统计
2006/10/09 PHP
php中cookie的作用域
2008/03/27 PHP
PHP 实现判断用户是否手机访问
2015/01/21 PHP
php生成固定长度纯数字编码的方法
2015/07/09 PHP
简单谈谈php延迟静态绑定
2016/01/26 PHP
php编程每天必学之表单验证
2016/03/01 PHP
PHP Static延迟静态绑定用法分析
2016/03/16 PHP
jQuery 数据缓存模块进化史详细介绍
2012/11/19 Javascript
jQuery关于导航条背景切换效果实现示例
2013/09/04 Javascript
js读取配置文件自写
2014/02/11 Javascript
纯jquery实现模仿淘宝购物车结算
2015/08/20 Javascript
使用jquery动态加载Js文件和Css文件
2015/10/24 Javascript
jQuery fancybox在ie浏览器下无法显示关闭按钮的解决办法
2016/02/19 Javascript
AngularJS全局scope与Isolate scope通信用法示例
2016/11/22 Javascript
使用jQuery实现鼠标点击左右按钮滑动切换
2017/08/04 jQuery
基于Vue实例对象的数据选项
2017/08/09 Javascript
全新打包工具parcel零配置vue开发脚手架
2018/01/11 Javascript
微信小程序实现多选框功能的实例代码
2020/06/24 Javascript
Python计算开方、立方、圆周率,精确到小数点后任意位的方法
2018/07/17 Python
浅谈pycharm出现卡顿的解决方法
2018/12/03 Python
Appium+python自动化之连接模拟器并启动淘宝APP(超详解)
2019/06/17 Python
python产生模拟数据faker库的使用详解
2020/11/04 Python
selenium自动化测试入门实战
2020/12/21 Python
西班牙自行车和跑步商店:Alltricks
2018/07/07 全球购物
如何写出高质量、高性能的MySQL查询
2014/11/17 面试题
大学生自荐书范文
2013/12/10 职场文书
技校毕业生自荐信范文
2014/03/07 职场文书
婚前协议书
2014/04/15 职场文书
政法干警核心价值观心得体会
2014/09/11 职场文书
学生逃课检讨书1000字
2014/10/20 职场文书
先进个人评语大全
2015/01/04 职场文书
2015年三万活动总结
2015/03/25 职场文书
优秀班主任工作总结2015
2015/05/25 职场文书
导游词之长城八达岭
2019/09/24 职场文书
Elasticsearch6.2服务器升配后的bug(避坑指南)
2022/09/23 Servers