vue 本地服务不能被外部IP访问的完美解决方法

解决 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访问的解决方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • vue init webpack myproject构建项目 ip不能访问的解决方法

    问题 vue init webpack myproject构建项目 使用localhost 或者127.0.0.1 均可以正常访问,但是切换到本地ip就不行了 解决方式 在 webpack.dev.conf.js 追加以下代码 const HOST = process.env.HOST || '0.0.0.0'; 重新启动 npm run dev 重新打开即可 以上这篇vue init webpack myproject构建项目 ip不能访问的解决方法就是小编分享给大家的全部内容了,希望能给大家

  • vue-cli项目无法用本机IP访问的解决方法

    所遇问题 启动vue-cli项目服务,用本机IP无法访问此网站,拒绝了我们的链接请求.从而无法从手机上预览效果 原因分析 在我们的bulid目录下有一个webpack.dev.config.js的配置文件,发现devServer对象里的host属性取自process.env.HOST || config.dev.host. 于是这里我们去查看config.dev.host.在我们的config目录下有一个index.js, 找到dev对象的host属性 发现该版本的vue-cli将host主机名

  • vue在手机中通过本机IP地址访问webApp的方法

    vue在手机中通过本机IP地址访问webApp的方法

    vue中通过localhost:8080,就可以访问浏览项目,但是如果改成本机IP则会报错 通过localhost:8080访问效果 通过本机IP显示效果 如果想通过手机输入本机IP访问需要在package.json中配置 package.json配置 最后在手机通过IP就可以访问到webApp,或借助草料二维码生成修改后项目地址的二维码,掏出手机扫一扫即可~ 通过机IP访问效果 Tips:需要手机和电脑在一个局域网(wifi)下 总结 以上所述是小编给大家介绍的vue在手机中通过本机IP地址访

  • vue 本地服务不能被外部IP访问的完美解决方法

    解决 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: 'warnin

  • HTTP 错误 403.1禁止访问:禁止执行访问的完美解决方法

    HTTP 错误 403.1禁止访问:禁止执行访问的完美解决方法

    HTTP 错误 403.1 - 禁止访问:执行访问被拒绝. 解决方法该页无法显示 您试图从目录中执行 CGI.ISAPI 或其他可执行程序,但该目录不允许执行程序. 请尝试以下操作: 如果您认为该目录应该允许执行访问权限,请与网站管理员联系. HTTP 错误 403.1 - 禁止访问:执行访问被拒绝. 技术信息(为技术支持人员提供) 转到 Microsoft 产品支持服务并搜索包括"HTTP"和"403"的标题. 打开"IIS 帮助"(可在 II

  • 阿里云主机不能用IP访问网站的解决方法(配置安全组规则搞定)

    刚买了一台阿里云主机,迫不待及的试试速度,怎知网站访问不了,用IP或绑定域名都无法访问,后来提交工单才知道,需要配置安全组规则才行.针对同样像我一样的新手,本文就介绍一下如何在开通阿里云主机后配置安全组规则,让网站能够外网访问. 1.打开安全组管理界面 安全组管理界面的位置在,菜单->网络与安全->安全组,在这里可以创建安全组实例(如果还没创建实例的话),或者配置安全组规则(如果购买主机时已经创建实例). 安全组管理(点击图片放大) 点击"配置规则",如果还没有创建实例的话

  • webpack本地开发环境无法用IP访问的解决方法

    问题描述: 只能用http://localhost:8080访问项目,不能用http://本机IP:8080访问 解决方案: webpack dev配置文件中加上 host:'0.0.0.0' 以上这篇webpack本地开发环境无法用IP访问的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: 解决webpack无法通过IP地址访问localhost的问题

  • Asp.net "对路径的访问被拒绝" 解决方法的分析

    给下面这个目录加上ASP.NET帐号的权限.C:/WINDOWS/Microsoft.NET/Framework/v2.0.50727/Temporary ASP.NET Files ASP.NET帐号的权限为: 读取和运行,列出文件夹目录,读取,写入. 前几天把自己写的东西移植到另一台机器上的时候,出了这个问题.很直觉地想到了是权限问题.可是我把WEB目录下的权限都几乎改成了完全控制,还是不能解决问题.查了很多资料,讲得也不清楚.有说改这个,也有说改那个的.后来,终于注意到,出错时显示的是对

  • vue webpack打包后图片路径错误的完美解决方法

    vue webpack打包后图片路径错误的完美解决方法

    项目用run dev build 打包后,发现很多图片都不显示,在本地是没有问题的啊!找原因发现通过webpack+vuecli默认打包的css.js等资源,路径都是绝对的. 因为我们的图片路径都是经历过文件夹的,在本地引用图片是绝对路径,但打包后因为把配置的static文件夹当成了根路径,所以很多图片找不到都不显示. 解决办法如图: (1). 修改 assetsPublicPath: './' (2).打开webpack.prod.conf.js,在output:增加 publicPath:

  • Docker容器开jupyter不能访问到的解决方法

    在本项目中使用了docker容器搭建环境,Dockerfile 如下: FROM tensorflow/tensorflow:1.14.0-gpu-py3 RUN pip install scipy==1.3.3 RUN pip install requests RUN pip install Pillow RUN pip install matplotlib RUN pip install pandas RUN pip install keras==2.2.4 RUN pip install

  • SQL Server作业失败：无法确定所有者是否有服务器访问权限的解决方法

    SQL Server作业失败：无法确定所有者是否有服务器访问权限的解决方法

    一.错误提示 : 该作业失败. 无法确定所有者 WIN-3TH1KNIT12D\Administrator (拥有作业 Database_Backup.step1)是否有服务器访问权限 (原因: 无法获取有关 Windows NT 组/用户 'WIN-3TH1KNIT12D\Administrator' 的信息,错误代码 0x534. [SQLSTATE 42000] (错误 15404)). 二.说明: 更改作业计划的所有者,不是数据库所有者 三.解决方法: 下面是其他网友的补充方法 下午准备

  • 浅谈php处理后端&接口访问超时的解决方法

    [HTTP访问] 一般我们访问HTTP方式很多,主要是:curl, socket, file_get_contents() 等方法. 如果碰到对方服务器一直没有响应的时候,我们就悲剧了,很容易把整个服务器搞死,所以在访问http的时候也需要考虑超时的问题. [ CURL 访问HTTP] CURL 是我们常用的一种比较靠谱的访问HTTP协议接口的lib库,性能高,还有一些并发支持的功能等. CURL: curl_setopt($ch, opt) 可以设置一些超时的设置,主要包括: *(重要) CU

  • Django与Vue语法的冲突问题完美解决方法

    当我们在django web框架中,使用vue的时候,会遇到语法冲突. 因为vue使用{{}},而django也使用{{}},因此会冲突. 解决办法1: 在django1.5以后,加入了标签: {% verbatim myblock %} {% endverbatim myblock %} 被此标签包裹的代码将不会被Django的模板引擎渲染. 因此,我们可以把带有{{ }} 的Vue代码放在 {% verbatim myblock %}标签中间,例如: <div id="app1&quo

随机推荐