Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Vue——Vue项目本地服务器设置既能localhost访问又能手机IP访问

Vue——Vue项目本地服务器设置既能localhost访问又能手机IP访问

作者头像
双面人
发布于 2020-04-21 02:36:09
发布于 2020-04-21 02:36:09
4.2K0
举报
文章被收录于专栏:热爱IT热爱IT

在初始化完一个vue项目(基于vue-cli 和webpack)之后,我们可以通过 npm run dev来让这个项目跑起来。

我们在浏览器里输入localhost:8080就可以访问该项目了。

但是要是手机想访问的话,就得通过ip地址,但当我输入ip地址进行访问时,却发现不行。

于是我找项目的配置文件,发现config/index.js,有个host的配置项,默认值为“localhost”,我把localhost改成ip地址,重启,发现可以访问,但localhost:8080这个地址就没办法访问了。

本着一点强迫症,在网上百度的基础与向dalao请教的基础之上,找到了有个解决办法。既能通过ip地址访问,也能通过localhost访问。

方法1.将index.js中的host的值改为‘0.0.0.0’

方法2.修改package.json中script下dev的值,在后面加入--host 0.0.0.0 也可以解决

分类: 前端开发

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
vue菜鸟从业记:完成项目最后一公里之真机测试和打包上线
昨天下班后,王小闰在朋友圈看到很多城市都下雨了,有位童鞋发了一张他下班后在等车的照片,让我的朋友王小闰感触颇深,让他回忆起了当年在杭州工作的职场生活,于是将这张图拿来当做了文章插图。
闰土大叔
2018/07/24
6930
vue菜鸟从业记:完成项目最后一公里之真机测试和打包上线
vue项目搭建及基本配置
准备阶段会将项目环境配置完毕,包含 node、 npm、 webpack和 vue-cli。已经完成的小伙伴可以跳过此步骤看第二阶段。
流眸
2019/08/12
3.5K0
解决webpack无法通过IP地址访问localhost的问题
只能用http://localhost:8080访问项目,不能用http://本机IP:8080访问
李维亮
2021/07/09
3.6K0
Vue项目无法使用局域网IP直接访问的配置方法
一般使用 vue-cli 下来的项目是可以直接访问局域网 IP 打开的,比如 192.168.1.11:8080 。但是最近公司的一个项目只可以通过 localhost 访问。
德顺
2019/12/24
6.2K0
webpack+vue项目实战(一,搭建运行环境和相关配置)
现在正在开发一个公司的后台管理项目,项目是一个单页面应用。功能上就是管理销售订单的各个环节,包括物流管理,回款管理,订单管理等等的功能。这些就不多说了。项目是,基于webpack3,vue2.2.6,element2.2.9。js语法是使用es6,还有使用到的一些资源比如,vue-router,vue-resource,webpack-dev-server等。运行环境是node6.10.0,npm3.10.10,其它版本的小小伙伴要注意版本兼容的问题喔!
守候i
2018/08/22
1.1K0
webpack+vue项目实战(一,搭建运行环境和相关配置)
使用vue-cli搭建spa项目
目录 1. vue-cli安装 1.1 安装前提 1.2 什么是vue-cli 1.3 安装vue-cli 2. 使用vue-cli构建项目 2.1 使用脚手架创建项目骨架 2.2 到新建项目目录,安装需要的模块 2.3 如何修改端口号 2.4 添加element-ui模块 2.5 package.json详解 3. install命令中的-g, -S, -D参数 4. vue项目结构说明 5.什么是*.vue文件 6. 启动过程 7. 开发示例 7.1 做一个自定义组件Welcome 7.2 增加“用户管
用户10196776
2022/11/22
7770
使用vue-cli搭建spa项目
Vue+MySQL+Express vue链接数据库
npm install -g cnpm --registry=http://registry.npm.taobao.org
余生
2018/10/15
6.4K1
cordova打包vue2(webpack)android、ios app
使用cordova打包vue2(webpack)app for android ios 1、vue项目 通过vue-cli脚手架建立项目,使用webpack进行打包,下边是一整套命令。 #npm 版本最好是最新的,升级npm,node版本也有要求 npm i -g npm # 安装脚手架 npm install -g vue-cli #初始化新建项目 vue init webpack vue-app # install dependencies # config/index.js 里可以修改端口 n
码农笔录
2018/06/29
3.1K0
如何在手机上查看测试vue-cli构建的项目
用vue-cli构建的项目有时候有些功能需要在手机上测试,比如上传图片的时候调用手机拍照功能或者查看相册的功能,这个时候就要用到手机测试了,那么如何在手机上查看测试vue-cli构建的项目?今天就写一写具体步骤。
王小婷
2025/05/18
540
如何在手机上查看测试vue-cli构建的项目
Vue2+VueRouter2+webpack 构建项目实战(三)配置路由,整俩页面先
2016年,我写了一系列的 VUE 入门教程,当时写这一系列博文的时候,我也只是一个菜鸟,甚至在写的过程中关闭了代码审查,否则通不过校验。
FungLeo
2022/05/05
5600
Vue2+VueRouter2+webpack 构建项目实战(三)配置路由,整俩页面先
如何在手机上查看测试vue-cli构建的项目
用vue-cli构建的项目有时候有些功能需要在手机上测试,比如上传图片的时候调用手机拍照功能或者查看相册的功能,这个时候就要用到手机测试了,那么如何在手机上查看测试vue-cli构建的项目?今天就写一写具体步骤。
王小婷
2018/08/22
1K0
如何在手机上查看测试vue-cli构建的项目
vue06安装vue-cli+使用vue-cli搭建项目+什么是*.vue文件+开发示例+必问面试知识点
安装成功后会在配置的node_global\node_modules目录下会看到vue-cli目录。
天蝎座的程序媛
2022/11/18
7900
vue06安装vue-cli+使用vue-cli搭建项目+什么是*.vue文件+开发示例+必问面试知识点
vue2.0项目从零开发到打包部署
自从用饿了么框架重构项目以来,遇到 很多问题,我都有一一记录下来,现在特喜欢这个框架,说实话,如果你是用了vue这个技术栈的话,一定要用饿了么的pc端框架哦,遇到问题的时候在网上百度一下,就能找到解决方案,还有很多社区可以讨论,社区文档都比较成熟,很容易上手~~
王小婷
2020/12/07
1.6K0
vue2.0项目从零开发到打包部署
Python Web实战:Flask + Vue 开发一个漂亮的词云网站
今天就分享一个用Flask做的词云生成网站,非常有意思的小web,适合练手。这是一个前端用 Vue,后端用 Python 的 Web 框架 Flask 开发的词云生成应用,代码已上传到 flask-vue-word-cloud
龙哥
2021/12/09
1.1K0
Python Web实战:Flask + Vue 开发一个漂亮的词云网站
Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(三)认识项目所有文件
Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(三)认识项目所有文件 在《Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版
FungLeo
2018/01/08
7580
Vue的安装及使用快速入门
vue是一个JavaMVVM库,是一套用于构建用户界面的渐进式框架,是初创项目的首选前端框架。它是以数据驱动和组件化的思想构建的,采用自底向上增量开发的设计。它是轻量级的,它有很多独立的功能或库,我们
李才哥
2019/08/12
6410
Vue的安装及使用快速入门
vue踩坑-Error: listen EADDRNOTAVAIL 192.168.1.122:8081
每天上班,重启电脑,按照下面的步骤,打开vue的项目,开始编写代码,但是,今天一如往常一般操作: 1:cd /项目名称 下面就是运行项目了,cd /项目名称,我的文件放在D盘,所以先进入d盘,再进入项目。 cd ShopApp
王小婷
2018/09/26
2.4K0
实战:Flask + Vue 生成漂亮的词云
这是一个前端用 Vue,后端用 Python 的 Web 框架 Flask 开发的词云生成应用,代码已上传到 flask-vue-word-cloud。写这个小项目的起因是最近团队年终述职,有一些大佬的 PPT 上用了词云来展示自己团队一年的工作成果。还有大佬说不要守着自己的一亩三分地,在技术上拓宽视野可以帮助我们更好的成长。正好之前接触过 Python 和 R 生成词云,于是作为一个移动端开发者,想在本地跑一个生成词云的服务,就有了这个项目。
咸鱼学Python
2020/02/26
2.1K0
实战:Flask + Vue 生成漂亮的词云
三分钟使用webpack-dev-sever搭建一个服务器
webpack-dev-server是一个小型的Node.js Express服务器,我们可以通过它搭建一个本地服务器,并且实现文件热更新; 1.切换到你的目录下对项目进行初始化 npm init
李文杨
2018/03/14
1.2K0
三分钟使用webpack-dev-sever搭建一个服务器
Vue+tp6 php框架如何快速建立一个前后端分离项目
作者主要是写后端的,所以本文主要以后端的角度,讲如何使用Vue+Tp框架结合,快速打通一个前后端分离的项目部署,可以作为后端学习Vue的入门步骤,通过此教程,你可以学到在生产环境和本地环境中,vue+tp 等框架是如何结合以及部署的。
PHP开发工程师
2021/04/26
4.7K0
Vue+tp6 php框架如何快速建立一个前后端分离项目
推荐阅读
相关推荐
vue菜鸟从业记:完成项目最后一公里之真机测试和打包上线
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档