Vue项目设置可以局域网访问

更新时间：2022年10月22日 11:33:54 作者：@凌晨三点半

这篇文章主要介绍了Vue项目设置可以局域网访问，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

Vue项目设置局域网访问

1. 项目根目录下的package.json中找到

// 添加了 “--host 0.0.0.0”
 
"dev": "webpack-dev-server --host 0.0.0.0 --inline --progress --config build/webpack.dev.conf.js",

2. 关闭电脑防火墙

根据自家网络类型关闭相应的防火墙就可以了我家是专用网络（当时随便选的)

这样就可以了（华为荣耀10值得信赖！）

同一局域网访问本地Vue项目

需要访问电脑需要在同一局域网下 | | 连同一个WiFi，这个就不说了吧。懂得都懂。

调试机 ip：192.168.30.100，将 192.168.30.100 改为你自己本机 ip 就OK。

不需要修改配置文件

重启本地环境：

yarn run dev --host 192.168.30.100 （加红的 yarn 是关键，不要尝试用 cnpm 或者 npm ）

需要修改配置文件

方法一：

在 config/index.js 文件中找到 host: 'localhost'，将 'localhost' 改为 192.168.30.100

然后启动项目： cnpm run dev --host 或 npm run dev --host，此处不需要加 --host + ip

host: '192.168.30.100',

方法二：

在 package.json 文件中找到 scripts ，然后在 dev 命令最后面加上 --host 192.168.30.100

然后正常启动项目： cnpm run dev 或 npm run dev

"scripts": {
  "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 192.168.30.100",
},

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vue3通用API功能示例剖析
这篇文章主要为大家介绍了Vue3通用API功能示例剖析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-05-05
vant 时间选择器--开始时间和结束时间实例
这篇文章主要介绍了vant 时间选择器--开始时间和结束时间实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-11-11
vant中list的使用以及首次加载触发两次解决问题
这篇文章主要介绍了vant中list的使用以及首次加载触发两次解决问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
vue可视化大屏实现无线滚动列表飞入效果
本文主要介绍了vue可视化大屏实现无线滚动列表飞入效果，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-04-04
vue强制刷新组件的三种方法
在Vue中,强制刷新组件通常涉及到以下几种方法,本文给大家列出了常见的三种vue强制刷新组件的方法,感兴趣的朋友跟随小编一起看看吧
2024-04-04
一文详解如何在Vue3+Vite中使用JSX
vite是一个由vue作者尤雨溪专门为vue打造的开发利器,其目的是使 vue项目的开发更加简单和快速,下面这篇文章主要给大家介绍了关于如何在Vue3+Vite中使用JSX的相关资料,需要的朋友可以参考下
2023-02-02
vue3+vite中使用import.meta.glob的操作代码
在vue2的时候，我们一般引入多个js或者其他文件，一般使用 require.context 来引入多个不同的文件，但是vite中是不支持 require的，他推出了一个功能用import.meta.glob来引入多个，单个的文件，下面通过本文介绍vue3+vite中使用import.meta.glob,需要的朋友可以参考下
2022-11-11
深入浅析vue全局环境变量和模式
这篇文章主要介绍了vue全局环境变量和模式的相关知识，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2020-04-04
vue实现对highlight-current-row方式整行选中后修改默认背景颜色
这篇文章主要介绍了vue实现对highlight-current-row方式整行选中后修改默认背景颜色方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-11-11
Vue2.x和Vue3.x的双向绑定原理详解
这篇文章主要给大家介绍了关于Vue2.x和Vue3.x的双向绑定原理的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-11-11