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",
},

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

相关文章

  • vue监听页面上的报错信息

    vue监听页面上的报错信息

    这篇文章主要介绍了vue监听页面上的报错信息,window.onerror和window.addEventListener(‘error‘)的区别,需要的朋友可以参考下
    2023-10-10
  • vue3中使用Apache ECharts的详细方法

    vue3中使用Apache ECharts的详细方法

    最近在做一些数据透析的项目需要用到报表图,那么报表图好用的有老牌的ECharts,比较新意的AntV,思前马后的想了一下还是用了Echarts,这篇文章主要介绍了vue3中使用Apache ECharts,需要的朋友可以参考下
    2022-11-11
  • el-table如何添加loading效果

    el-table如何添加loading效果

    这篇文章主要介绍了el-table如何添加loading效果问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-08-08
  • Vue组件通信实践记录(推荐)

    Vue组件通信实践记录(推荐)

    本篇文章主要介绍了Vue组件通信实践记录(推荐),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • vue3使用echart的两种引入方式以及注意事项说明

    vue3使用echart的两种引入方式以及注意事项说明

    这篇文章主要介绍了vue3使用echart的两种引入方式以及注意事项说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • vue中过滤器filter的讲解

    vue中过滤器filter的讲解

    今天小编就为大家分享一篇关于vue中过滤器filter的讲解,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-01-01
  • vue组件打包并发布到npm的全过程

    vue组件打包并发布到npm的全过程

    这篇文章主要介绍了vue组件打包并发布到npm的全过程,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • vue如何判断组件进入可视区域

    vue如何判断组件进入可视区域

    这篇文章主要介绍了vue如何判断组件进入可视区域问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • Vue渲染器如何对节点进行挂载和更新

    Vue渲染器如何对节点进行挂载和更新

    这篇文章主要介绍了Vue 的渲染器是如何对节点进行挂载和更新的,文中通过代码示例给大家介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
    2024-05-05
  • vue如何解决el-select下拉框显示ID不显示label问题

    vue如何解决el-select下拉框显示ID不显示label问题

    这篇文章主要介绍了vue如何解决el-select下拉框显示ID不显示label问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-06-06

最新评论