本地运行的前端代码，如何让他人访问

最新推荐文章于 2024-07-22 21:01:00 发布
最新推荐文章于 2024-07-22 21:01:00 发布
阅读量1.4k 收藏 3
点赞数
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_60961651/article/details/131508636
版权

有时候，我前端写好了项目，想要给其他人看一下效果，可以选择将代码部署到test环境，也可以选择让外部通过ip来访问，不过前提是在同一个局域网下（比如连接同一个WiFi），下面介绍第二种方式。

修改dev命令

首先我们需要先修改host地址，此处以vue3项目举例

页面启动之后如下

正常情况下，script下的dev命令是不会指定host的，我们可以在下面看到Local的地址为默认的127.0.0.1,此时把这个网址发给别人肯定跑不起来。

所以我们可以指定host，比如0.0.0.0，允许所有ip访问

 

js
 

复制代码
 

"dev": "vite --host=0.0.0.0", 
 

修改完host后，windows系统的话，我们还需要关闭防火墙（苹果不需要）。重新启动项目可以看到
 

 

Network那里的网址，打马赛克的地方其实就是本机的ip地址，window输入cmd打开命令提示符，然后输入ipconfig即可查到ip地址，苹果的话，点击wifi小图标，同时按住option键即可查到ip地址。
 

在其他电脑或者手机访问
 

浏览器中输入url即可看到相关页面，此方法也适用于手机端调试
 

 

 


                

        

        

    

  


    

      

        

            

              
                
                  夜栩
                
              
            

            

                关注
              
            

        

        

          
      

      









                



	

		

			

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

				
			

			

				

					weixin_52268321的博客
				

				

					06-12
					
					1177
					
				

			

		

		

			
				
进入“防火墙和网络保护”，关闭下面三个。

			
		

	



                

              
                



	

		

			

				
					
怎么让别人访问自己的本地vue项目

				
			

			

				

					qq_45780380的博客
				

				

					04-29
					
					1848
					
				

			

		

		

			
				
怎么让别人访问自己的本地vue项目

			
		

	



                


  
              

                


	

		

			

				
					
在自己电脑上编写的项目如何让别人也能访问（内网穿透）？

				
			

			

				

					qq_45323089的博客
				

				

					10-12
					
					4713
					
				

			

		

		

			
				
内网穿透

			
		

	





	

		

			

				
					
内网穿透-让别的主机可以访问你本地的项目,前后端不用再见面~~

				
			

			

				

					米斯木的博客
				

				

					06-07
					
					612
					
				

			

		

		

			
				
比如常用的办公室软件等，一般在办公室或家里，通过拨号上网，这样办公软件只有在本地的局域网之内才能访问，那么问题来了，如果是手机上，或者公司外地的办公人员，如何访问到办公软件呢？// 支付宝公钥,查看地址：https://openhome.alipay.com/platform/keyManage.htm 对应APPID下的    支付宝公钥。//http://rjn4vk.natappfree.cc是内网穿透后的地址(就是你的主机地址,在别人电脑上用这个就可以联网访问你的主机)id=123这类自定义参数。

			
		

	



		

			
		



	

		

			

				
					
vue项目，别人电脑上看你本地的项目

				
			

			

				

					Achong999的博客
				

				

					02-24
					
					2246
					
				

			

		

		

			
				
别人打开这个就可以访问你本地项目了（类似于：192.168.100.100:8089 ）（PS：连同一个WiFi，必须在同一个局域网才行）npm run dev --host 报错。4. 电脑IP+端口即可访问了。

			
		

	





	

		

			

				
					
前端项目实战4：如何让自己写的网站可以被别人访问？

				
			

			

				

					qq_44139411的博客
				

				

					02-16
					
					1万+
					
				

			

		

		

			
				
目录

1.先买一个服务器。

2.买域名！

3.服务器和域名都买好之后，打开宝塔（这是一个网站）

4.通过宝塔，向服务器里上传你的代码。

5.你的代码，进行了修改，或者完善之后，如何让网站跟着更新？

今天终于知道，怎么把自己的网站上传到服务器了。

1.先买一个服务器。

轻量型即可。可以到腾讯云，天翼云……

天翼云活动





2.买域名！

比较麻烦，听我朋友说，还得去公安那里备案。所以我是直接用我朋友买的创建了一个域名。

可以上腾讯云去购买域名。



3.服务器和域名都买好之后，打开

			
		

	





	

		

			

				
					
本地启动前端项目，如何让外部通过ip去访问

					
热门推荐

				
			

			

				

					weixin_45847735的博客
				

				

					01-20
					
					1万+
					
				

			

		

		

			
				
在项目的pakeage,json文件中写 --host ip(ip是本机的IP)，然后重新启动项目，就可以在其他主机通过ip:项目端口/访问路径访问对应的项目内容了




			
		

	





	

		

			

				
					
在没有测试环境情况下如何让其他人访问本地vue项目

				
			

			

				

					qq_36571836的博客
				

				

					11-24
					
					332
					
				

			

		

		

			
				
vue内网穿透本地项目

			
		

	





	

		

			

				
					
natapp内网穿透-将本地运行的程序/服务器通过公网IP供其它人访问

				
			

			

				

					是谢添啊
				

				

					10-13
					
					1868
					
				

			

		

		

			
				
内网穿透，即 NAT（Network Address Translation，网络地址转换）穿透，网络连接时术语，计算机是局域网内时，外网与内网的计算机节点需要连接通信，有时就会出现不支持内网穿透。Natapp 提供了跨平台的客户端和服务器端，用户可以通过在客户端配置映射规则，将内部服务映射到公网上的一个临时域名上，从而实现对内部服务的远程访问。在项目开发阶段我们可以把项目部署在公网能访问的云服务器上，也可以使用内网穿透工具来访问我们自己电脑上运行的测试接口。

			
		

	





	

		

			

				
					
【工作】-其他人访问本地项目

				
			

			

				

					weixin_46254175的博客
				

				

					05-04
					
					508
					
				

			

		

		

			
				
同个前端模块并行多个需求同节点进行联调时、介入测试阶段前端测试环境只有一套时。因前端环境冲突问题，导致大量堆积。5.其他电脑访问localhost.kgtest.cn，成功访问到前端本地所启动的项目以及对应打到的环境中。可以先在对方电脑上，ping一下自己的ip地址，看是否能通过。3.本地和对方配置Host，这里推荐SwitchHosts，比较方便。1.涉及到登录态相关解决办法：（需前端和需要访问的同学配合）1.配置VUE启动服务的Host。针对可以本地拿到登录态的项目。

			
		

	





	

		

			

				
					
其他人如何查看前端工程师在本地跑的vue项目（0.0.0.0）

				
			

			

				

					01-20
				

			

		

		

			
				
本文将详细介绍如何让其他人能够访问前端工程师本地运行的Vue项目。  首先，Vue项目通常通过webpack-dev-server或类似的开发服务器运行，它们默认将项目绑定到`localhost`，这意味着只有在本地计算机上才能访问。...

			
		

	





	

		

			

				
					
vue-cli打包后本地运行dist文件中的index.html操作

				
			

			

				

					10-14
				

			

		

		

			
				
标题和描述中提到的核心知识点是如何使用Vue CLI打包后的项目在本地环境中运行。Vue CLI是Vue.js的官方命令行工具，它简化了Vue.js项目...通过理解和掌握这些知识点，可以更好地处理Vue项目打包和本地运行的常见问题。

			
		

	





	

		

			

				
					
前端：React/Vue项目打包后的代码不部署，怎么在本地运行？

				
			

			

				

					weixin_46721670的博客
				

				

					10-11
					
					1273
					
				

			

		

		

			
				
前端：React/Vue项目打包后的代码不部署，怎么在本地运行？

			
		

	





	

		

			

				
					
【前端开发】开源的AI代码生成器OpenUI如何本地安装与配置详细教程

					
最新发布

				
			

			

				

					weixin_44976692的博客
				

				

					07-22
					
					1万+
					
				

			

		

		

			
				
本篇文章介绍如何在Windows系统本地部署Open UI并结合Cpolar内网穿透工具配置公网地址，轻松实现随时随地远程访问本地部署的Open UI智能生成前端代码。Open UI 是一个开放源代码的项目，致力于创建一个可扩展、可定制，并且能够跨平台运行的用户界面框架。该项目的目标是提供一套标准化的组件库，让开发者可以更高效地构建响应式的Web应用，同时保持对最新Web技术的兼容性和前瞻性。

			
		

	





	

		

			

				
					
轻松让别人访问到自己本地项目

				
			

			

				

					激发创造，丰富生活
				

				

					10-05
					
					2641
					
				

			

		

		

			
				
内网穿透(Ngrok)
引入
在写项目中，小伙伴不犯会有一些困惑或者烦恼，如果在没有服务器的情况下，别人就无法访问到自己的项目了吗？
回答不是的。
什么是内网穿透
官方解释是，内网穿透，也即 NAT 穿透，进行 NAT 穿透是为了使具有某一个特定源 IP 地址和源端口号的数据包不被 NAT 设备屏蔽而正确路由到内网主机。
通俗的讲就是，通过一个域名可以访问到自己本地已运行起来的项目。
N...

			
		

	





	

		

			

				
					
详细介绍别人电脑访问到自己电脑运行的项目

				
			

			

				

					weixin_70280523的博客
				

				

					04-12
					
					3801
					
				

			

		

		

			
				
网络

			
		

	





	

		

			

				
					
让其他电脑访问本地前端页面

				
			

			

				

					xiaopiaoliang777的博客
				

				

					05-16
					
					3213
					
				

			

		

		

			
				
方法：

1、同一个局域网下（使用插件 live serve）

2、不同局域网（使用github生成仓库）

3、花钱买服务器（不介绍）

具体步骤：

1.1 vscode安装插件live serve；

1.2 静态页面html文件上右键，选中open with live serve选项；

1.3 将浏览器的实时页面的网址127.0.0.1替换本地ip ，端口号不用变；

1.4 查看本地ip方法：cmd打开命令行窗口，输入ipconfig，ipv4即为本地ip；



2.1
...

			
		

	





	

		

			

				
					
前端项目部署云端服务器实现多人访问

				
			

			

				

					qq_63656102的博客
				

				

					05-16
					
					502
					
				

			

		

		

			
				
来到服务器管理页面，还得做很多操作，第一步就是先去远程连接，去连接我们的远程服务器，对他进行操作。大家购买完服务器我们就可以去控制台去管理我们的服务器。我们在浏览器输入外网面板地址进去就可以对我们的服务器操作了。再看本文章之前，如果有不会可以去看也可以看下面视频。首先去软件商店下载mp2管理工具。前端部署阿里云服务器。

			
		

	





	

		

			

				
					
怎么把用vue写的前后台项目打包上传到服务器让其能访问

				
			

			

				

					weixin_45463061的博客
				

				

					08-19
					
					2787
					
				

			

		

		

			
				
怎么把用vue写的前后台项目打包上传到服务器让其能访问

			
		

	





	

		

			

				
					
用前端代码写ip访问统计展示

				
			

			

				

					06-10
				

			

		

		

			
				
前端无法直接获取访问者的IP地址，因为IP地址是由服务器端返回给客户端的。因此，IP访问统计需要在服务器端完成，前端只能通过发送请求获取统计数据并展示。

以下是一个简单的示例：

1. 在服务器端记录访问次数和IP地址，将其保存到数据库或文件中。

2. 创建一个API接口，用于获取访问统计数据。例如，可以使用Node.js和Express框架来创建API接口：

```javascript
const express = require('express');
const app = express();

// 获取访问统计数据
app.get('/api/stats', (req, res) => {
  // 查询数据库或文件，获取访问次数和IP地址列表
  const stats = {
    visits: 1000,
    ips: ['192.168.0.1', '192.168.0.2', '192.168.0.3']
  };
  res.json(stats);
});

// 启动服务器
app.listen(3000, () => {
  console.log('Server started on port 3000');
});
```

3. 在前端页面中发送请求获取访问统计数据，并展示到页面上。可以使用jQuery库来简化AJAX请求的代码：

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>访问统计</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <h1>访问次数： <span id="visits">0</span></h1>
  <h2>最近访问IP地址：</h2>
  <ul id="ips"></ul>
  <script>
    // 发送请求获取访问统计数据
    $.get('/api/stats', (data) => {
      // 更新页面上的访问次数
      $('#visits').text(data.visits);
      // 显示IP地址列表
      data.ips.forEach(ip => {
        $('#ips').append('<li>' + ip + '</li>');
      });
    });
  </script>
</body>
</html>
```

注意，以上代码仅为示例，实际应用中需要根据具体情况进行修改和优化。此外，为了防止恶意访问和隐私泄露，访问统计应该在服务器端进行严格控制和保护。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  





	
打赏作者

	

		

		
			
		
		

		

			
夜栩

			
你的鼓励将是我创作的最大动力

		

	

	

			

	

	

    ¥1
    ¥2
    ¥4
    ¥6
    ¥10
    ¥20
	

	

		

			

				

					扫码支付：¥1
				

				

					

					
					获取中
					

				

				

					
					
					扫码支付
				

			

		

		

			
您的余额不足，请更换扫码支付或充值

			
打赏作者

		

	



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值