vue+vite实现前端，其他设备访问主机IP+端口号

最新推荐文章于 2025-03-14 10:21:33 发布
最新推荐文章于 2025-03-14 10:21:33 发布
阅读量770 收藏
点赞数
分类专栏： vue3 文章标签： 前端 vue.js tcp/ip
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_59833893/article/details/133912591
版权

一、前端代码配置

    "scripts": {
		"serve": "vite --host 0.0.0.0",
		"dev": "vite --mode development",
		"preview": "vite preview",
		"build": "vite build --mode production",
		"prod": "vite  --mode production"
	},

配置：--host 0.0.0.0，输入 npm run serve 则下面有 Local 与 Network 两个访问地址，其他设备使用 Network 访问。

二、其他设备还是不能访问报503

检查访问后端的IP地址月端口号是否正确：

查看这两个文件：

vite构建项目npm run dev之后出现多个Network地址，他们分别代表什么
虎康的博客
04-19 2285
在 vite 构建项目中，vite 构建项目使用的是 rollup 打包器和本地服务器，它通过使用现代浏览器的特性实现了极快的热更新和构建时间。当你运行 npm run dev 命令后，如果你的设备连接了多个网络适配器（例如 Wi-Fi、以太网等），那么就会出现多个 Network 地址，每个地址对应不同的网络适配器。一般情况下，vite 会自动检测到您当前所连接的所有网络适配器，并绑定所有可用的 IP 地址和默认端口号（3000）作为服务器地址。如果您只需要在本地开发和测试，可以使用 Local 地址。
Electron+Vue3+Vite+ElectronForge整合 - 一键启动两个服务 & 一键打包两个服务
northcastle的博客
04-30 2615
electron + vue3 + vite + electron-forge 实现一键启动 & 一键打包功能
vue3系列：vite+vue3怎么配置通过ip和端口打开浏览器
最新发布
浪潮行舟_chenjin2136
03-14 477
查了些资料，原来是vite.config.js需要加一些配置才能让他通过IP访问，默认的只能。server中还可以修改端口号port，比如8080被占用，可以修改为6060；希望本文能帮助到您，有其他问题请直接留言！想要通过IP：端口号访问，配置文件增加。的方式访问页面，结果无法访问。使用vue3默认创建的。
局域网如何让别人访问本地vite+vue3项目
Yajyaj123的博客
05-15 1317
-port 指定端口，80的话直接输入ip即可访问，只需要npm run dev 即可，别人可以通过IP访问。打开package.json。
(vue)前端获取ip方法
nyf_unknow的博客
05-31 5125
【代码】(vue)前端获取ip方法。
Vue + Vite项目，如何让他人访问（小技巧）
qq_40884528的博客
05-08 2727
前端写好项目，想让其他人简单查看一下效果，在同一局域网下（比如连接同一WiFi）可以让外部通过ip来访问。
【vue】前端通过腾讯接口获取用户ip
莫诺库诺的博客
12-03 3970
之前在前端项目中获取用户ip的方式一直用的是搜狐的接口：http://pv.sohu.com/cityjson?ie=utf-8%22，同时这也是网上分享次数最多的接口，虽说提供的信息很少，但因为使用起来方便快捷，且基本没什么限制，所以还是挺不错的。但不知怎的，最新经常在调用时出现403Forbidden，要么就是胡乱给ip和地区，总之就是没法用。 没办法，是时候另寻他途了。在经过一番挑选后，最终选择了腾讯的位置信息服务。其它可选的还有百度、高德、天地图等。官网：https://lbs.qq.com/ 开发
【Vue3 + Vite】Vite搭建 项目解构 Vue快速学习 第一期
Orion
01-28 2856
vue3+vite项目搭建，安装启动停止，项目目录解构，组件说明，CSS导入方式，Vue3实现计数器....
Vue3+vite+TypeScript+Vant项目搭建
VnOcean的博客
09-01 1080
本篇讲述基于NodeJs、Vite、Vue3、Typescript搭建前端项目的详细步骤，此外还包括配置pinia（store）、router、跨域代理以及引入vant库的主要步骤。
Vue3 + Vite+ Element-Plus + TypeScript 搭建系统
weixin_45044818的博客
12-04 1843
一种新的专门的编程语言，编译后成正常的CSS文件。为CSS增加一些编程的特性，无需考虑浏览器的兼容问题，让CSS更加简洁，适应性更强，可读性更佳，更易于代码的维护等诸多好处。创建 variables.scss 变量文件，注意规范变量以 $ 开头 @styles/variables.scss。上面导出的scss全局变量在ts不生效的，需要创建一个以.module.scss 结尾的文件。添加scss @styles/normalize.scss。vite导入variables.scss。
【Vue+Mysql实现前端对接数据库】
前端知识分享喵
12-17 1953
Vite + Vue3 工程化环境下，需要在 package.json 中配置。注意：Node 14+ 版本支持 CommonJS 和 ESM 两种规范。当然你也可以使用 CommonJS 规范通过。导入模块，这样项目中就存在两种规范的写法了。其它 api 文件配置参考 login.js。，且后端文件后缀需要由。
【vue+js】PC端获取主机id、IP地址、主机名
qq_24385297的博客
07-27 5427
3.在你需要的地方直接使用process.env.VUE_APP_HOST（IP地址）、process.env.VUE_APP_NAME（主机名）、process.env.VUE_APP_MACHINEID（设备id）需求描述：在用户登录时，前端需要获取主机id、IP地址、主机名，传给后端。1.安装包 npm i node-machine-id。2.在vue.config.js文件中复制粘贴如下代码。打印出来是下图这个样子。
记录一下vue项目获取外网ip地址的方法
ljb376766764的博客
01-09 285
vue项目获取外网ip地址的方法
vue 本地的项目别人怎么通过 ip地址来访问
qq_42353989的博客
08-08 3759
最近有人问我，我写了个vue 项目，但是我经理想在他电脑上看效果 怎么看不了，连接的是同一个无线网？ 1. 告诉大家一个最简单的方法，找到confing下的index.js 把你的host： 原来的localhose 改为你自己的ip地址，然后保存，这样别人就能在同一局域网下 来访问你的vue 项目了 访问的时候通过你的ip地址加上你的端口号就ok了 ...
vite (vue3)配置内网 ip 访问 方法
热门推荐
qq_39111074的博客
04-01 1万+
vite 配置内网 ip 访问 方法
vue获取内外网ip地址
qq_39865491的博客
08-19 1万+
两种方法可以用vue获取内外网IP地址
vue打包怎么在外部配置文件（端口），并可以动态访问端口地址（输入什么就访问什么）
buchishutiao的博客
02-05 2929
需求：每次修改程序会很麻烦，需要我们在打包的时候生成配置文件，直接修改文件就可以改变端口。1.首先在打包的目录static下创建config.js文件。3.还在此目录下的index.html引用config.js。但是我是在项目的更目录加的 打包完之后这里也会出现引用的。2.config.js文件内容（加双引号）4.定义全局变量global.js。5.在main.js中引用。7.打包后就可以读取了。
vue3+vite 配置反向代理和跨域 设置端口号
10-09
Vue3 和 Vite 结合配置反向代理和跨域主要是为了在本地开发环境下访问非本机服务。以下是基本的设置步骤： 1. **Vite** 中设置：Vite 默认支持 `vite.config.js` 文件来进行配置。你需要添加一个 `server` 对象，其中包含 `proxy` 属性。例如： ```javascript export default defineConfig({ server: { port: 3000, // 可选，设置服务器监听端口，默认为 3000 proxy: { '/api': { // 目标 URL 前缀 target: 'https://api.example.com', // 跨域目标地址 changeOrigin: true, // 允许跨域请求 secure: false, // 如果目标是 HTTPS，则这里设为 false rewrite: (url) => url.replace(/^\/api/, ''), // 重写路径 }, }, }, }); ``` 2. **Vue3** 部分：这主要是处理浏览器的同源策略，对于 Vue 的路由配置，你可以使用动态路由元信息来实现跨域，但这不是必需的。 3. **启用跨域**：如果你的API需要跨域，后端服务器可能需要允许来自特定域名或端口的请求。具体取决于你的服务器环境，如 Node.js 的 Express 或 Nginx，通常需要在服务器上做相应的 CORS（Cross-Origin Resource Sharing）配置。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值