vue-cli使用ip访问本地服务

配置Vue本地IP访问
最新推荐文章于 2024-01-16 14:42:58 发布
原创 最新推荐文章于 2024-01-16 14:42:58 发布 · 1.5k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #tcp/ip #前端 #vue-cli3

本文介绍如何通过简单地更改host设置来实现使用本机IP地址访问由vue-cli启动的Node.js服务。通常情况下，该服务默认只能通过localhost或127.0.0.1访问，但将host设置为'0.0.0.0'即可启用IP地址访问。

vue-cli启动的node服务，试用localhost或者127.0.0.1可以正常访问，但是如果想用本机ip访问的话，需要修改一个设置，host

host: '0.0.0.0',  //应设置为0.0.0.0，而不是localhost
从Vue-cli脚手架的基本使用到vue路由的基本使用
m0_62823653的博客
05-12 2939
第一部分：Vue-cli脚手架 vue2是对新手很友好的MVVM框架，有完善的官方中文文档，阅读起来也非常容易理解，由浅入 深，示例完整。同时官方也提供了一个开箱即用的vue-cli帮我们生成一个完整的项目框架 vue.js 著名的全家桶系列, 包含了， vue-router, vuex， axios，再加上 vue-cli 就是一个从 路由，数据流管理，http请求都有的核心项目，vue 社区的丰富资源，也是满足了我们日常开发中的需求了。 Vue-cli脚手架就是Npm的第三方包，全局安...
通过IP访问vue-cli项目的步骤和PC端可通过IP访问，手机无法访问的问题解决
大唐锦绣的博客
05-06 2825
前言:启动vue-cli项目服务，在PC端用本机IP可访问此网站，但是手机访问却拒绝了我们的链接请求。从而无法从手机上预览效果。 一、部署ip和localhost都可以访问本地vue-cli项目 （1）查看config目录下有一个index.js, 找到dev对象的host属性（vue-cli将host主机名定义为localhost, 从而导致了本地IP不能访问服务） host: 'l...
vue-cli3如何在局域网通过ip访问项目
chenrui310的博客
11-04 2977
1、创建vue.config.js (cli3相对于cli2，之前的build和config文件夹不见了，那么应该如何配置 如webpack等的配那只需要在项目的根目录下vue.config.js 文件（是根目录，不是src目录)） module.exports = { devServer: { port: 8080, // 端口号 host: "localhost", https: false, // https:{type:Boolean}
vue连接本地服务器
大道至简
12-29 1422
vue,js连接本地服务器
vue-cli 搭建项目使用局域网访问，通过ip地址访问项目
奔跑的搬运工
08-01 8367
vue-cli 搭建项目使用局域网访问，通过ip地址访问 使用vue-cli搭建的项目，别人可以访问电脑 ip访问项目 在config文件中找到 index.js 文件 中找到下面代码 module.exports = { dev: { // Paths assetsSubDirectory: 'static', assetsPublicPath: '...
Vue-cli5 localhost和ip都能访问
qq_45328957的博客
01-20 227
Vue-cli5 程序启动后 ip和localhost都能访问 并且程序启动后 为 http://localhost:80
vue-cli启动本地服务局域网不能访问的原因分析
01-19
 本地vue-cli启动了一个项目只能通过localhost:8080访问到，同一局域网下其他的手机和电脑并不能通过ip地址访问调试， 2.原因：vue-cli项目是通过命令行一键生成的，配置文件中默认生成的是本地调试模式，默认访问...
vue-cli项目无法用本机IP访问的解决方法
12-11
所遇问题 启动vue-cli项目服务，用本机IP无法访问此网站，拒绝了我们的链接请求。...发现该版本的vue-cli将host主机名定义为localhost, 从而导致了本地IP不能访问服务。 解决办法 将host重新定义为：0
vue-cli的项目中把localhost换成自己的ip无法访问
shu580231的博客
05-03 3751
很多情况下，我们在pc端开发的项目，需要在手机上调试。这个时候，但是发现我如果直接将localhost换成自己的ip,是无法访问的，解决办法：在package.json中，，"scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "start": "np...
Vue2版本如何使用ip访问?
weixin_52261391的博客
06-24 2680
vue2版本使用ip地址访问
Vue Cli 修改localhost为IP访问
weixin_42236396的博客
05-07 3508
1.修改 package.json,增加 --host 0.0.0.0，让本次代码支持localhost以外的ip地址访问模式 2.修改config/index.js,将localhost改为0.0.0.0 此时项目就可以通过localhost或本机IP访问了，但是在cmd输出上只提示了0.0.0.0:8080访问路径，需要修改提示 修改方式： 1.在build目录下创建一个获取本机IP的方法,get-ip.js var os = require('os'), ip = '', ifaces =
vue-cli下配置项目访问ip和服务器ip
weixin_30362083的博客
10-29 1127
一、配置项目访问ip，让本次代码支持localhost以外的ip地址访问模式：修改里的host配置，代码如下。 修改完记得 "npm run dev"重启服务。 二、在本地架设服务器端，并让vue的‘api’路径转义成服务器端路径：修改里的映射表，对'api'进行转义配置，代码如下。 其中'^api':'/elemeapi'是说，把路径里的"api"打头的"api"字符串替换...
vue本地前端调用服务器接口的代理设置
weixin_37472852的博客
11-13 1532
修改vue.config.js,主要代码如下： proxy: { // detail: https://cli.vuejs.org/config/#devserver-proxy [process.env.VUE_APP_BASE_API]: { // 访问路径，如‘dev-api’ target: `http://192.168.1.10:8080`, // 目标服务器ip和端口 changeOrigin: true, pat
vue项目使用自定义域名开启本地服务（ip地址和域名映射）
qq_2511276124的博客
07-04 5340
使用域名访问本地服务。
vue项目如何让局域网ip访问配置设置
10-18 2110
第二步：检查 package.json 文件里进行配置，scripts.dev配置是否设置 host为‘0.0.0.0’这里我要强调下，第一步和第二步都有ip，其实第二步优先级高，这里第二步的host可以不设置，vue默认执行第一步的设置。在开发中，为了让同一局域网的小伙伴，都可以通过IP地址访问到vue-cli搭建的项目，要怎么配置呢?这个ip也可以设置成你的局域网ip，例如：192.168.1.182。第三步：查看开发机的ip地址，并告诉给其他小伙伴，别忘了端口。
通过IP地址访问前端Vue项目
最新发布
2301_78767322的博客
01-16 1723
通过IP地址访问前端Vue项目
vue+element-项目build打包以后入口文件显示空白的解决方案
红岸基地
06-14 4198
现象描述 我在准备测试一个项目的时候，需要打包给后端使用， 我打完包以后发现，入口文件，也就是这个文件 该文件是直接打不开的，那么我之前是遇到过的，此类的问题，开始是认为是router.js里面的mode改变了导致的，也就是我们在配置路由的时候是可以直接将mode：history的，在路由文件里面，但是我改变以后发现还是不行的，后来百度了以后发现是因为其中有一个文件是不对的，需要我们在配置文件里...
VUE 本地和内网（远程）访问配置
梦翼横空的专栏
02-25 2376
VUE配置本地和无程同时访问，在局域网访问，得到内网IP地址。 本机电脑由于开启Hyper-V，所以默认得到的内网是虚拟网卡的IP，所以需要特殊的方法来得到内网IP
vue-cli搭建项目，使用localhost或ip地址均可访问
luodao_的博客
03-01 6938
使用vue-cli开发移动端项目，为实现在局域网内pc和移动端都可以访问。在 config 里面的 index.js 的 module.export 下面的host: 'localhost' 改为 host:'0.0.0.0'
本地vue-cli启动了一个项目只能通过localhost:8080访问到,同一局域网下其他的手机
09-08
本地vue-cli启动的项目默认只能通过localhost:8080访问，这是因为它默认只绑定了本地的IP地址（即127.0.0.1）。如果想让同一局域网下的其他手机也能访问到该项目，可以通过以下方式进行设置： 1. 查找本地IP地址：在命令行中输入ipconfig（Windows）或ifconfig（Mac/Linux），找到与局域网连接的本地IP地址，通常形如192.168.x.x。 2. 修改vue-cli的配置文件：在项目的根目录下找到config文件夹，打开index.js文件。找到dev属性下的host属性，默认值是'localhost'，将其改为你的本地IP地址。 例如：host: '192.168.x.x' 3. 保存并重新启动项目：保存修改后的配置文件，并重新启动vue-cli项目。 4. 在其他手机上访问：确保其他手机与同一局域网下，并在手机浏览器中输入你的本地IP地址加上端口号8080（例如：192.168.x.x:8080），即可访问到vue-cli项目。 需要注意的是，如果你的电脑使用了防火墙软件，可能需要允许其他设备通过局域网访问你的电脑。另外，由于vue-cli启动的项目是开发环境下的服务器，可能在某些手机浏览器上存在兼容性问题，建议使用Chrome或Safari等主流浏览器进行访问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值