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主机名定义为localhost, 从而导致了本地IP不能访问服务。

解决办法

将host重新定义为:0.0.0.0即可, 然后重启服务,发现localhost、127.0.0.1、本地IP均能正常访问,这样就可以用手机来预览效果啦

host: '0.0.0.0'

以上这篇vue-cli项目无法用本机IP访问的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • webpack vue项目开发环境局域网访问方法

    思路:将自己的项目启动ip与端口固定,当然端口也可以为默认的8080 步骤: 1.查看自己在局域网内的ip 命令行 ipconfig 2.回到自己的开发目录,在根目录找到comfig/index.js 修改 host: 自己的局域网ip 修改 port: 自定义端口-最好不要用80或者其他常用端口 示例:comfig/index.js host:'http://192.168.2.153',//一定要加上 http port:3000 注意:此处ip一旦固定,本机访问的或localhost将不可

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

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

  • 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主机名

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

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

  • mysql数据库无法被其他ip访问的解决方法

    前言 还是之前说的项目,环境目前已经准备好了,项目准备验证阶段发现了一个问题,从上层应用输入鉴权访问应用,一直在等待状态,输入了正确的用户名及密码,却无法访问.看起来像是没办法访问到数据库连接的意思. mysql部署后的端口一般都是3306,尝试去ping和telnet 3306端口,发现ip可以ping通,但是3306端口无法被telnet,并且给出了一个这样的报错: ERROR 1130: Host *.*.*.* is not allowed to connect to MySQL 看到这

  • Vue CLI项目 axios模块前后端交互的使用(类似ajax提交)

    Vue-CLI项目-axios模块前后端交互(类似ajax提交)08.31自我总结,内容如下: Vue-CLI项目-axios前后端交互 一.模块的安装 npm install axios --save #--save可以不用写 二.配置main.js import axios from 'axios' Vue.prototype.$axios = axios; 三.使用 created() { // 组件创建成功的钩子函数 // 拿到要访问课程详情的课程id let id = this.$ro

  • 利用Vue3 创建Vue CLI 项目(一)

    目录 一.官方文档 二.创建Vue CLI项目 1.安装Vue CLI 2.创建web应用 3.启动web应用 三.Vue CLI项目结构讲解 一.官方文档 Vue3文档 - vuejs https://www.vue3js.cn/docs/zh/ Vue核心功能:数据绑定 Vue CLI文档 https://cli.vuejs.org/zh/guide/ Vue CLI = Vue.js + 一堆组件 二.创建Vue CLI项目 1.安装Vue CLI 淘宝镜像 SQL: npm get re

  • 利用Vue3 (一)创建Vue CLI 项目

    目录 一.官方文档 二.创建Vue CLI项目 1.安装Vue CLI 2.创建web应用 3.启动web应用 三.Vue CLI项目结构讲解 一.官方文档 Vue3文档 - vuejs https://www.vue3js.cn/docs/zh/ Vue核心功能:数据绑定 Vue CLI文档 https://cli.vuejs.org/zh/guide/ Vue CLI = Vue.js + 一堆组件 二.创建Vue CLI项目 1.安装Vue CLI 淘宝镜像 SQL: npm get re

  • 关于Flask项目无法使用公网IP访问的解决方式

    最近在折腾Python Web,在测试的时候发现,本机可以正常访问,但外网无法通过公网IP访问页面.经过各种搜索,有大致三种解决方案. 一.修改/添加安全组端口 这是第一种方案,也是能解决大部分问题的一个方案. 由于我的服务器是阿里云的,所以在阿里云的ECS云服务器控制台中,管理安全组,添加5000和8000端口以便测试. 经过测试,外网依旧无法访问.失败-- 二.配置/关闭防火墙 由于我的服务器是Windows Server 2016 操作系统,经过提醒,考虑是否是防火墙未允许端口通过. 如图

  • Vue 项目中遇到的跨域问题及解决方法(后台php)

    问题描述 前端 vue 框架,后台 php,百度跨域问题后台加这段代码 header("Access-Control-Allow-Origin: *"); 加了之后报这个错: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The valu

随机推荐