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.js的组件可以理解为预先定义好了行为的ViewModel类。这篇文章主要介绍了Vue.js组件使用开发实例教程的相关资料,需要的朋友可以参考下2016-11-11
这篇文章主要为大家详细介绍了Vue-Router来实现组件间跳转的三种方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
这篇文章主要介绍了Vue+Mockjs模拟curd接口请求的示例详解,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-07-07
这篇文章主要给大家详细介绍一下Vue3中的基本语法，文中的示例代码讲解详细，对我们学习Vue3有一定的帮助，感兴趣的小伙伴可以了解一下2022-11-11
组件是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。这篇文章主要介绍了VUE 中添加手机验证码组件,需要的朋友可以参考下2017-12-12
Vue 路由组件向app.vue主文件传值的方式(两种常见方式)
在Vue.js中,可以使用路由传参的方式向App.vue主页面传递数据,有多种方法可以实现这一目标,本文结合实例代码给大家介绍的非常详细,需要的朋友参考下吧2023-11-11
这篇文章主要介绍了vue深度监听(监听对象和数组的改变)与立即执行监听实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
Unity webgl嵌入到前端网页中,前端通过调用Unity webgl内方法实现需要展示的功能,前端点击Unity webgl内的交互点,Unity webgl返回给前端一些需要的数据,这篇文章主要介绍了Unity webgl 嵌入Vue实现过程,需要的朋友可以参考下2024-01-01
这篇文章主要介绍了vue项目中使用bpmn为节点添加颜色的方法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-04-04
本篇文章主要介绍了详解vue中点击空白处隐藏div的实现（用指令实现），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
最新评论