vue项目使用IP地址访问

最新推荐文章于 2024-06-24 11:03:14 发布
最新推荐文章于 2024-06-24 11:03:14 发布
阅读量2.6k 收藏
点赞数 1
分类专栏： vue.js 文章标签： vuejs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yanhailun/article/details/102609101
版权

在vue项目npm run dev运行之后，会提示我们使用localhost:8081访问
在这里插入图片描述
但是有时候我们需要在手机上查看显示效果，就需要在同一个局域网下使用ip替代localhost，但是直接写ip是不行的，我们需要配置一下dev的执行，在package.json中添加代码：
在这里插入图片描述
然后就可以通过IP地址访问项目了

一个柠檬味的前端
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
完美解决通过IP地址访问VUE项目的问题
01-21
第一步 1.将config里面的host设置成0.0.0.0 host: ‘0.0.0.0’, 2.修改package.json scripts: { start: cross-env NODE_ENV=development webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 0.0.0.0, } 第一步和第二步都有ip，其实第二步优先级高，这里第二步的host可以不设置，vue默认执行第一步的设置 3.查看开发机的ip地址，并告诉给其他小伙伴，还有端口号 补充
vue项目局域网通过ip访问
bocaidada的博客
01-18 3615
使用vue-cli搭建的项目，需要同一局域网都可以通过本机IP地址访问到 在config文件中找到 index.js 文件 中找到下面代码 将此处的host改为0.0.0.0就可以，或许有的小伙伴同一局域网打开ip+端口号开还是不能访问，此时只需要关闭防火墙就好了 查看本机IP 按住win+R，输入cmd 然后输入ipconfig就可以了 ...
局域网内vue2 3 配置本地IP地址访问项目
最新发布
m0_68716504的博客
06-24 691
/在这句代码后面添加 --host 0.0.0.0" 如下messages: [ //下面两个地方，直接复制即可` - Local: http://localhost:${port}`, //配置这里` - Network: http://${require('ip').address()}:${port}`,//配置这里],},?}))
Vue - 同时使用 ip、localhost访问项目
iotjin的专栏
03-10 1516
Vue - 同时使用 ip、localhost访问项目
ip地址访问vue运行项目
梧桐芊羽的博客
09-19 2849
ip地址访问vue运行项目 在未进行配置下，通过ip地址访问vue运行项目，是无法访问的。 vue项目想要通过ip地址访问运行项目，需执行以下操作。 1.查看本机IP地址。win+R打开cmd命令，输入ipconfig/all查看本机ip地址。 2.修改package.json文件中添加–host 0.0.0.0，然后重新重启项目。 "scripts": { "dev": "webpack...
vue项目配置同一局域网可使用ip访问的操作
01-18
此处的”0.0.0.0″可以改成自己的ip，重启项目就可以了 补充知识：@vue/cli创建项目报错ERROR Failed to get response from /vue-cli-version-marker的解决方案 今天他们遇到一个很有意思的bug，用@vue/cli创建项目...
vue-cli项目无法用本机IP访问的解决方法
10-17
然而，有时我们可能遇到一个问题，即在尝试通过本机IP地址访问这个开发服务器时，浏览器提示“拒绝了我们的链接请求”，这使得无法在连接到同一局域网的其他设备（如手机）上预览应用。这个问题通常是由于Vue CLI的...
通过IP地址访问前端Vue项目
2301_78767322的博客
01-16 1102
通过IP地址访问前端Vue项目
vue项目配置局域网可访问（局域网通过ip地址访问本地项目）
starstarstarl的博客
03-01 737
vue项目配置局域网可访问，局域网通过ip地址访问本地项目
vue-element-admin 搭建步骤(二)登录配置
qq_39793857的博客
02-03 2975
前面的项目搭建步骤可以看我的上一篇博文，下面我们就开始登录和后端对接的配置改造 目前我的版本是最新的4.3.1 一丶先删除package.json下的eslint 下面的两个文件也删掉 二丶在vue.config.js文件中配置代理并将原本的mock代理 before: require('./mock/mock-server.js') 注释掉 最新版的里面并没有proxy，所有需要代理就加上去 proxy:{ [process.env.VUE_APP_BAS
Vue3使用vite配置前端服务IP、端口、跨域代理、访问资源路径前缀
热门推荐
郭新宇的博客
06-30 7万+
Vue3配置代理跨域(使用vite.config.js文件配置vite.config.js 配置文件 vue3发布有一段时间了，其中vite感觉很好用，现在配置跨域和服务端口等配置，可以不使用vue-cli的vue.config.js了，可以只使用vite.config.js进行配置。 vite.config.js 配置文件 import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' const { resolve
vue与原生app交互之vue工程主动获取url携带的参数
julystroy的博客
12-29 5726
不管是Android还是iOS都有各自的架构体系，在一定程度上是完全不依靠其他语言或者技术上的支持去完成所需功能，但是不可否认的是html做的图形化界面就是比原生的好看和流畅。比如下面这张图： 问题：后台url请求需要携带cookie，需要用户的useId,但是我做的这个vue工程只是app里的一个小模块······ 需求：在用webview加载该模块时，需要同时传入cookie和useId，v...
vue+element-项目build打包以后入口文件显示空白的解决方案
红岸基地
06-14 4057
现象描述 我在准备测试一个项目的时候，需要打包给后端使用， 我打完包以后发现，入口文件，也就是这个文件 该文件是直接打不开的，那么我之前是遇到过的，此类的问题，开始是认为是router.js里面的mode改变了导致的，也就是我们在配置路由的时候是可以直接将mode：history的，在路由文件里面，但是我改变以后发现还是不行的，后来百度了以后发现是因为其中有一个文件是不对的，需要我们在配置文件里...
如何使用手机预览Vue项目（移动端）
手掌日月摘星辰
06-28 2万+
1、在命令行中输入npm run dev ，启动自己的vue项目，例：http://localhost:8081/#/goods，可以在浏览器预览2、那么如何在手机端预览vue项目呢？WIN+R，输入cmd启动命令行工具，输入ipconfig查看本机ip3、本机ip替换localhost，例：http://192.168.1.171:8081/#/goods，预览效果不变4、使用草料二维码，将ht...
Vue项目通过network的ip地址访问注意事项
Tang__CT的博客
01-22 5453
Vue项目通过network的ip地址访问方法 在config.js文件中的dev中修改host为0.0.0.0 devServer: { // 环境配置 host: '0.0.0.0', port: 8080, https: false, hotOnly: false, disableHostCheck: true, open: false // 配置自动启动浏览器 }, 或者在packag
Vux 中x-address的使用
marko_zheng的博客
11-20 3792
Vux 中x-address的使用 <template> <div> <Group> <x-address title="地址信息" v-model="MyAddress" placeholder="请选择地址" :list="ChinaAddressV4Data"><
vue项目打包后直接修改ip地址
02-06
然后在 Vue 项目中使用 localhost 就可以访问到所需的 IP 地址了。 另一种方法是使用一个代理服务器来转发请求。可以使用 nginx 或其他类似的工具来配置代理服务器，将请求转发到所需的 IP 地址上。 还有一种方法...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值