局域网下别人访问本地运行的vue项目

已于 2023-06-13 14:42:20 修改
阅读量1k 收藏 3
点赞数
文章标签： vue.js javascript 前端
于 2023-06-12 21:01:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52268321/article/details/131176764
版权

背景

仅vue项目，无后台
网上其他教程有修改config目录index.js文件的，当前本地vue项目没有config目录

关闭防火墙

进入“防火墙和网络保护”，关闭下面三个
在这里插入图片描述

启动vue项目

首先下面是我的vue和脚手架版本
在这里插入图片描述
启动vue项目
（在别的教程中看到，很多人说要修改index.js/vue.config.js文件的host，但我没有修改，直接运行就可以了）
在这里插入图片描述
network是当前无线局域网的ip地址（ipconfig中也可以查看到）
局域网下别人通过下面的ip地址和端口就可以访问了

诚诚程程成
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
(vue.js)nuxt.js:IP端口/局域网配置
11-01
1、nuxt.js/vue.js安装与运行 2、Ip端口冲突解决 3、IP端口/局域网配置 4、运行[WebStorm]]的配置
webpack vue项目开发环境局域网访问方法
08-27
总的来说，通过以上步骤，你就能成功地在Webpack和Vue的开发环境中设置局域网访问，让团队成员能够实时共享和测试代码，提升协同开发的效率。请记住，安全是首要考虑的因素，不要在不安全的网络环境下开启这种设置，...
本地vue项目的本地调试，同一个局域网下如何让其他人也可以访问我的本地项目
Zzexi的博客
08-18 5776
本地vue项目的本地调试，如何让其他人也可以访问我的本地项目（同一个局域网下） 我们只需要在config文件夹下配置下host属性，只需要把host:"",里面的值改为你本地的ip即可，记得加上端口号 如果是vue-cli3没有config文件，就在根目录创建上vue.config.js文件，然后同样配置host属性即可。 ...
局域网内访问vue3项目|Network: use --host to expose
最新发布
hac1322的博客
05-13 728
这意味着只有在同一台计算机上的浏览器才能访问你的应用程序。通过指定一个公共的主机名，你可以使你的应用程序能够被网络中的其他设备访问，这对于在。上的设备，局域网是指在某一区域内由多台计算机互联成的计算机组，同一局域网不一定要接同一个交换机或者HUB。选项告诉开发服务器监听所有的网络接口，而不仅仅是本地主机。是一个特殊的 IP 地址，代表所有可能的 IP 地址。我希望在相同的局域网内，通过手机访问我在Vue 3项目中展示的效果。中的其他设备来访问你正在开发的应用程序。中的其他设备上测试你的应用程序特别有用。
vue项目配置局域网可访问（局域网通过ip地址访问本地项目）
starstarstarl的博客
03-01 732
vue项目配置局域网可访问，局域网通过ip地址访问本地项目
Vue项目启动后用局域网不能访问
分享自己的经验、IT技术，愿在博客中遇见更好的自己
12-08 2048
今天来解决一个问题：基于Vite构建的Vue项目在启动后只能通过localhost这种形式访问，但 如果把localhost换成本主机的局域网ip地址之后页面无法访问了。
局域网如何让别人访问本地vite+vue3项目
Yajyaj123的博客
05-15 1089
-port 指定端口，80的话直接输入ip即可访问，只需要npm run dev 即可，别人可以通过IP访问。打开package.json。
详细介绍别人电脑访问到自己电脑运行的项目
weixin_70280523的博客
04-12 3096
网络
vue项目打包后如何本都部署访问
zy199701的博客
07-04 2558
2、输入 npm i express -s 是用于在 Node.js 项目中安装 Express 框架的命令。app.use(express.static(‘./dist’)) // dist 是项目的打包资源路径。3、.将项目打包好的dist文件放入其中以及新建一个app.js文件用于运行。缺点，输入其他路由报错，点击按钮可以跳转，不知道怎么解决，直接转入方式二。1、新建一个文件夹 进入目录后打开cmd 输入npm init -y。5、接着在cmd输入运行命令 node .\app.js。
其他人如何查看前端工程师在本地跑的vue项目（0.0.0.0）
01-20
然而，在这种开发模式下，有时后端开发者需要查看前端工程师正在本地运行的Vue项目来配合测试或者调试。本文将详细介绍如何让其他人能够访问前端工程师本地运行的Vue项目。 首先，Vue项目通常通过webpack-dev-...
vue 本地服务不能被外部IP访问的完美解决方法
10-17
完成上述更改后，重新运行项目，现在应该可以通过局域网内的任何设备的IP地址访问你的Vue应用。例如，如果你的IP地址是`192.168.1.100`，那么其他设备可以通过`http://192.168.1.100:8080`访问你的应用。 此外，...
vue-cli项目无法用本机IP访问的解决方法
10-17
在开发Vue.js应用程序时，使用Vue CLI创建的项目通常会通过`npm run serve`命令启动一个本地开发服务器。然而，有时我们可能遇到一个问题，即在尝试通过本机IP地址访问这个开发服务器时，浏览器提示“拒绝了我们的...
vue 同局域网访问不到的问题及解决
yjl13598765406的博客
11-24 1658
vue 同局域网访问不到的问题及解决
让别人访问自己的vue项目
xuexuexiang的博客
05-10 3265
如何让他人免费地可以访问自己的vue项目呢，就可以把项目上传到GitHub或者Gitee，但是由于GitHub是国外，总是不稳定，所以这里选择使用Gitee。 首先使用npm serve bulid命令，将项目打包，打包成功后，会生成一个dist文件，也就是我们所要上传的文件。 在网页上的Gitee创建一个仓库，然后通过使用git bash命令行，将dist文件上传到Gitee。 在git bash命令下进入到vue项目的文件夹下，（也可以自己建立一个文件夹，然后将dist文件复制到这个文件夹下，前者
vue本地项目实现局域网访问
weixin_51751522的博客
06-03 3230
vue项目实现本地局域网访问 首先需要在同一个网络中，才能进行互相访问 首先需要找到config下的index.js文件，更改访问的host地址，将其改为 host: '0.0.0.0' 这样就已经能通过ip地址和localhost访问了，但是会发现启动后他是这个样子 这时就需要设置启动后终端显示localhost和network访问地址 找到build文件夹的webpack.dev.conf.js文件 找到其中的compilationSuccessInfo里的messages，如下图，在其中
vue项目，别人电脑上看你本地的项目
Achong999的博客
02-24 2165
别人打开这个就可以访问你本地项目了（类似于：192.168.100.100:8089 ）（PS：连同一个WiFi，必须在同一个局域网才行）npm run dev --host 报错。4. 电脑IP+端口即可访问了。
Vue项目给局域网访问
qq_37416316的博客
08-12 279
问题：直接运行不能给局域网访问 解决：在package.json文件中的scripts属性，修改dev的值，在后面添加--host 192.168.0.129即可。如图所示：
vue本地项目可以局域网能访问（IP地址访问）
Yiu的博客
04-30 4898
最近小伙伴们问我为什么VUE为神马不能再同局域网内访问，emmmm....！ 哈哈哈,怎么可能呢！本博主是无所不能的好不啦！ 下面进入主题，总结一下vue本地项目可以用IP地址 在局域网内访问 方法1.将index.js中的host的值改为‘0.0.0.0’ config/index.js,有个host的配置项，默认值为“localhost”,我把localhost改成ip地址，重...
Vue项目局域网访问
guoqkmiss的博客
07-30 1158
Vue项目局域网访问 vue-cli项目创建之后后端想通过局域网访问，然后进行项目调试。 第一步： 把config文件夹里面的index.js里面的dev开发配置的host设置为 host: “0.0.0.0” 第二步： 在build文件夹里面webpack.dev.conf.js里面的 devServer 加一个字段：disableHostCheck: true, //在 config -&g...
局域网访问vue项目看不到图片
05-30
如果您的 Vue 项目在局域网中可以访问，但是无法加载图片，那么可能是以下原因之一： 1. 您的图片路径是相对路径，而不是绝对路径。在本地运行时，相对路径可以正常工作，但是在其他设备上访问时，相对路径可能无法正常工作。您需要将图片路径改为绝对路径。 2. 您的图片存储在本地文件系统中，而不是存储在 Web 服务器上。在其他设备上访问您的项目时，这些设备无法访问您的本地文件系统中的文件。您需要将图片上传到 Web 服务器上，并且确保其他设备可以访问这些文件。 3. 您的图片链接是使用 HTTP 协议而不是 HTTPS 协议。在一些浏览器中，如果您的项目使用 HTTPS 协议，而图片链接使用 HTTP 协议，浏览器会阻止加载这些图片。您需要将图片链接改为 HTTPS 协议。 希望这些解决方案可以帮助您解决图片无法加载的问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值