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 相关文章推荐
js 使FORM表单的所有元素不可编辑的示例代码
Oct 17 Javascript
浅谈JavaScript实现面向对象中的类
Dec 09 Javascript
JavaScript数据类型之基本类型和引用类型的值
Apr 01 Javascript
深入浅析react native es6语法
Dec 09 Javascript
探究JavaScript函数式编程的乐趣
Dec 14 Javascript
简单谈谈gulp-changed插件
Feb 21 Javascript
vue的事件绑定与方法详解
Aug 16 Javascript
基于Vue 2.0的模块化前端 UI 组件库小结
Dec 21 Javascript
小程序实现五星点评效果
Nov 03 Javascript
Vue传参一箩筐(页面、组件)
Apr 04 Javascript
layui 动态设置checbox 选中状态的例子
Sep 02 Javascript
JS实现密码框效果
Sep 10 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 文章采集正则代码
2009/12/28 PHP
php中JSON的使用方法
2015/04/30 PHP
Centos6.5和Centos7 php环境搭建方法
2016/05/27 PHP
PHP实现适用于自定义的验证码类
2016/06/15 PHP
Zend Framework框架中实现Ajax的方法示例
2017/06/27 PHP
PHP使用SOAP调用API操作示例
2018/12/25 PHP
音乐播放用的的几个函数
2006/09/07 Javascript
open 动态修改img的onclick事件示例代码
2013/11/13 Javascript
JavaScript中的值类型转换介绍
2014/12/31 Javascript
JavaScript函数的一些注意要点小结及js匿名函数
2015/11/10 Javascript
nodejs初步体验篇
2015/11/23 NodeJs
莱鸟介绍window.print()方法
2016/01/06 Javascript
jQuery文字横向滚动效果的实现代码
2016/05/31 Javascript
javascript 中Cookie读、写与删除操作
2017/03/29 Javascript
NodeJs使用Mysql模块实现事务处理实例
2017/05/31 NodeJs
Webpack 之 babel-loader文件预处理器详解
2018/03/23 Javascript
微信小程序实现简易table表格
2020/06/19 Javascript
VScode格式化ESlint方法(最全最好用方法)
2019/09/10 Javascript
在Linux系统上部署Apache+Python+Django+MySQL环境
2015/12/24 Python
怎样使用Python脚本日志功能
2016/08/14 Python
python实现WebSocket服务端过程解析
2019/10/18 Python
150行Python代码实现带界面的数独游戏
2020/04/04 Python
django 实现简单的插入视频
2020/04/07 Python
python函数map()和partial()的知识点总结
2020/05/26 Python
Python爬虫抓取指定网页图片代码实例
2020/07/24 Python
用HTML5 实现橡皮擦的涂抹效果的教程
2015/05/11 HTML / CSS
"火柴棍式"程序员面试题
2014/03/16 面试题
分布式数据库需要考虑哪些问题
2013/12/08 面试题
Java编程面试题
2016/04/04 面试题
竞聘医务工作人员的自我评价分享
2013/11/04 职场文书
商务英语专业求职信
2014/06/26 职场文书
九一八事变纪念日演讲稿
2014/09/14 职场文书
2014物价局群众路线对照检查材料思想汇报
2014/09/21 职场文书
会计师事务所实习证明
2014/11/16 职场文书
活动宣传稿范文
2015/07/23 职场文书
Redis+Lua脚本实现计数器接口防刷功能(升级版)
2022/02/12 Redis