vue项目如何实现ip和localhost同时访问
更新时间：2022年10月22日 14:46:59 作者：成都丁海寅
这篇文章主要介绍了vue项目如何实现ip和localhost同时访问，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vue实现ip和localhost同时访问
因为localhost只能在本机访问，如果想其他电脑访问或者是移动端访问需要采用ip来访问 实现效果
1.在webpack.dev.conf.js里面配置messages字段
messages: [
`App runing at: `,
`Local: http://localhost:${port}`,
`Network: http://${require('ip').address()}:${port}`,
],
2.其他配置
（1）在package.json配置
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 0.0.0.0",
（2）在config/index.js里面配置host字段
host: '0.0.0.0', // can be overwritten by process.env.HOST
注意：在第二步只需要配置（1）或者（2）不需要全部配置，踩坑
vue使用localhost和新ip地址访问项目
问题描述
项目在本地上启动，想被其他电脑访问
原本只要连接局域网输入地址就可以，但是现在连接网线都实现不了
查过很多关于ip连接不显示的资料，都不行
结果查到的是自己的vue项目问题，更改有效
解决办法：更改三个文件（我只改了两个就行）
1、config->index.js
将dev下的host对应数据改成：'0.0.0.0'
(后端哥哥说0.0.0.0代表时刻变动的本机ip，你也可以直接改成不变的本机ip，比如我可以改成192.168.0.179，以下所有的都是这样)
2、package.json
把dev对应的数据后面加上： --host 0.0.0.0
3、build->webpack.dev.conf.js（我不用改，我本来就是动态的）
host对应数据改成：'0.0.0.0'
至此我的项目就可以运行以后使用本机ip查看啦：
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了Vue如何在页面刷新时进行重定向,文中的示例代码简洁易懂,具有一定的借鉴价值,有需要的小伙伴可以参考一下2025-01-01
这篇文章主要介绍了vue-router两种模式区别及使用注意事项,结合实例形式详细分析了vue-router两种模式hash模式与history模式的区别、用法与操作注意事项,需要的朋友可以参考下2019-08-08
这篇文章主要为大家详细介绍了如何利用vue实现简单的瀑布流布局,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2023-09-09
这篇文章主要为大家详细介绍了vue实现记事本功能，记事本可以进行添加删除事件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-06-06
这篇文章主要介绍了 解决Vue打包后访问图片/图标不显示的问题，本文给大家介绍的非常详细，具有一定的参考解决价值,需要的朋友可以参考下2019-07-07
今天小编就为大家分享一篇微信内置开发 iOS修改键盘换行为搜索的解决方案，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
这篇文章主要介绍了vue3.0封装轮播图组件的步骤，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下2021-03-03
这篇文章主要介绍了Vue Router 实现登录后跳转到之前相要访问的页面,本文仅演示路由跳转和导航守卫相关代码的实现，不包含具体的权限验证和登录请求，需要的朋友可以参考下2022-12-12
这篇文章主要介绍了如何使用Vue3和Ant Design Vue4.x实现图像标点和质量检测功能,文章详细描述了两种方式,每种方式都包括前端显示代码、配置基本数据、绘制圆点和序号以及处理图片点击的步骤,需要的朋友可以参考下2024-11-11
这篇文章主要介绍了Vue使用echarts可视化组件的方法,本文通过实例代码案例给大家详细介绍，需要的朋友可以参考下2021-07-07
最新评论