如何配置vue项目通过ip访问还是通过localhost访问

最新推荐文章于 2023-10-30 10:36:43 发布
最新推荐文章于 2023-10-30 10:36:43 发布
阅读量1.3k 收藏 2
点赞数 3
分类专栏： vue.js 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47160442/article/details/113506041
版权

vue项目本地启动时，如何配置通过ip访问还是通过localhost访问

一、 打开本目录下config文件夹下的index.js文件

把dev对象里面的 host 属性的值改为本机ip；
如何查看本机ip，看这里，这篇文章的后半段有写。
在这里插入图片描述

二、 打开package.json文件

在dev里面加上--host 192.168.x.xxx

在这里插入图片描述

三、 命令行里面重新启动项目

重新启动之后，只要是跟你的本机在同一局域网内的电脑都可以访问你本地启动的项目了。

小肉包de
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
解决vue中使用proxy配置不同端口和ip接口问题
10-16
主要介绍了解决vue中使用proxy配置不同端口和ip接口问题 ,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
vue项目本地启动，外部访问配置修改
weixin_38194239的博客
02-27 1407
vue项目本地启动，外部访问配置修改 1、vue-cli2项目中，找到config目录下，index.js 把index.js 的 host: ‘localhost’ 修改为host: ‘0.0.0.0’, 2、通过cmd 中ipconfig找到你的ip地址 3、这样外部就可以通过IP地址来访问你本地启动的项目了 ...
vue init webpack myproject构建项目 ip不能访问的解决方法
11-28
问题 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在手机中通过本机IP地址访问webApp的方法
12-09
vue中通过localhost:8080,就可以访问浏览项目，但是如果改成本机IP则会报错 通过localhost:8080访问效果 通过本机IP显示效果 如果想通过手机输入本机IP访问需要在package.json中配置 package.json配置 最后在手机通过IP就可以访问到webApp，或借助草料二维码生成修改后项目地址的二维码,掏出手机扫一扫即可~ 通过机IP访问效果 Tips:需要手机和电脑在一个局域网(wifi)下 总结 以上所述是小编给大家介绍的vue在手机中通过本机IP地址访问webApp的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回
webpack vue项目开发环境局域网访问方法
11-28
思路：将自己的项目启动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将不可访问，必须也使用这个ip，局域网也是一样用此ip访问 以上这篇webpack vue项目开发环境局
vue实现启动项目以后自动打开浏览器localhost
最新发布
2302_77290281的博客
10-30 289
vue实现启动项目以后自动打开浏览器localhost
vue项目通过本地IP地址访问，不是localhost
a5252145的博客
08-02 2896
vue项目通过本地IP地址访问，不是localhost 修改package.json中scripts属性，再dev属性下添加：--host 192.168.3.45即可。
vue项目启动时将localhost替换成指定ip地址
weixin_60684791的博客
11-19 1万+
node启动vue项目时地址一般都是http://localhost:8080 vue.config.js 中的host：‘localhost’换成host：‘你的本机ip’就可以了 module.exports = { devServer: { // 更换ip host:'192.168.1.100', // 代理访问 proxy: { 'api': { target: 'http://121.89.205.189/api'...
vue 服务只能使用localhost，不可用本地IP访问解决
sweet__queen的博客
09-03 3376
方法1.(1)修改index文件的host值，将localhost换成0.0.0.0,此时访问是0.0.0.0：80xx (2) 可在build/webpack.dev.conf.js中找到 devServer：--添加 useLocalIp:true, 方法2.package.json中 scripts： dev：最后添加 --host 0.0.0.0 原因： webpack-dev-server 配置 host 时，默认是localhost。如果想被外部访问，需要 ...
vite：配置ip访问
分享前端开发工程师的一些日常生活、前端知识点、职业发展、对一些问题的看法、感悟等等
02-15 1万+
背景 默认情况下 vite 不允许通过 ip 地址访问，只能通过 localhost。 修改 只需要修改 vite.config.ts，将 host 改为 0.0.0.0 server:{ host: '0.0.0.0', } 改完就可以看到了。 改 vite 配置不需要重启服务哦~ 官方文档介绍： 参考资料 官方文档 ...
vue-cli项目无法用本机IP访问的解决方法
12-11
启动vue-cli项目服务，用本机IP无法访问此网站，拒绝了我们的链接请求。从而无法从手机上预览效果 原因分析 在我们的bulid目录下有一个webpack.dev.config.js的配置文件，发现devServer对象里的host属性取自process....
vue 项目中设置localhost 和本机 ip 都可访问项目
weixin_42486547的博客
05-07 780
vue 项目中设置localhost 和本机 ip 都可访问项目 启动项目之后 使用 localhost 可以正常访问项目 当时当切换为本机 ip 访问的时候，访问不到页面 试了好多次终于找到一下两种方法 希望有所帮助 方法一： 在config文件夹下面的 index.js 里面 host 将 local host 修改为 0.0.0.0 ![在这里插入图片描述](https://img-blog.csdnimg.cn/ad850b0205944a419f4df9c978bdb814.png#pic_c
如何配置vue项目在localhost和network均可访问
weixin_42178670的博客
04-14 7074
1、首先在config文件下的index.js中修改host为（但此操作有bug，会导致localhost也变成0.0.0.0） host: '0.0.0.0'， 所以建议在package.json文件下“script”的“dev”后新增“-host 0.0.0.0”，即： "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 0.0.0.0", 2、设置启动后终端显示localh
【vue】将vue配置为多页面应用，多页面应用设置默认跳转页面
weixin_44100002的博客
11-23 3562
将vue配置为多页面应用，多页面应用设置默认跳转页面
Vue项目运行后自动打开默认浏览器（简化版）
yuansusu_的博客
01-18 514
项目每次运行都要打开控制台的地址，容易把我们累死，这里需要配置一些vue.config.js文件内容。
配置vue项目实现localhost本地访问和ip访问且设置启动后终端显示localhost和network访问地址
热门推荐
qq_41497443的博客
09-14 2万+
配置vue项目实现localhost本地访问和ip访问且设置启动后终端显示localhost和network访问地址 1、首先设置localhost和本地ip访问 在config文件下的index.js文件中，修改host为： host: '0.0.0.0'， 或者在package.json文件下"scripts"的"dev"值后新增–host 0.0.0.0"，即： "dev": "webpack-dev-server --inline --progress --config build/webpack
vue为什么网络请求会自动带上localhost:8080/
qq_43430964的博客
05-22 5999
要把协议也写上去： http://www.baidu.com 请查看"http://“是否书写有问题 是否写成了"http:”（忘记加两个反斜杠）
解决：vue启动成功后只能用localhost访问，使用ip就不得行的问题。
Handsome2013的博客
04-29 8116
解决：vue启动成功后只能用localhost访问，使用ip就不得行的问题。 修改一点配置就可以了：将config/index.js中的host:'localhost',修改为：host:'0.0.0.0' 修改后启动，就可以使用localhost和ip均可以访问vue界面。 ...
vue2 启动如何配置本机ip地址
fengxiaopeng74的博客
11-11 3412
vue2 启动如何配置本机ip地址
vue/cli4 无法通过ip访问本地项目
09-03
vue/cli4 默认的启动命令是通过 localhost 来访问本地项目的，因此无法直接通过 ip 地址来访问项目。但是我们可以通过修改配置文件来实现通过 ip 访问本地项目的功能。 首先，打开项目根目录下的 vue.config.js 文件，如果没有则新建一个。在该文件中添加以下代码： module.exports = { devServer: { open: true, host: '0.0.0.0', port: 8080, https: false, hotOnly: false, disableHostCheck: true, } } 上述代码中的 devServer 部分是用来配置开发服务器的选项。其中 host 字段设为 '0.0.0.0'，表示允许其他设备通过电脑的 ip 地址来访问项目。端口号 port 可以根据需要进行修改。 保存文件后，在命令行中执行 npm run serve 来重新启动项目。 接着，打开浏览器，输入电脑的 ip 地址加上之前设定的端口号（例如 http://192.168.1.100:8080），回车即可通过 ip 访问本地项目。 需要注意的是，只有连接到同一局域网下的设备才能通过 ip 访问到本地项目。若无法正常访问，请确保设备与电脑处于同一网络环境下。另外，关闭防火墙或在防火墙中添加对应的端口规则也可能是导致无法通过 ip 访问的原因之一。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值