Vite/Vue 项目 | 开发环境指定Host（允许其它电脑访问）

于 2025-07-18 10:55:33 发布
阅读量340 收藏 5
点赞数 7
CC 4.0 BY-SA版权
分类专栏： 前端 Vite/Vue 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Hsk_03/article/details/149439560

Vite/Vue 项目 | 开发环境指定Host（允许其它电脑访问）

开放防火墙相应端口，这是前提

方法一：指定启动参数

npm run dev -- --host 0.0.0.0

说明：打开package.json，会发现在script中有一个"dev": "vite"，因此所谓的npm run dev其实也就是vite run dev，而--表示命令结束后面是参数，因此会将--host 0.0.0.0传给vite（而非npm），此时vite就会允许其它主机访问该端口。

补充一句：vite run dev --host 0.0.0.0也是可以的，这里少了两个--哦。

方法二：将启动参数定义到脚本中

一劳永逸的方法 | 打开package.json，找到"dev": "vite"，改成如下：

"dev": "vite --host 0.0.0.0"

此时运行npm run dev即可：

npm run dev

原理也很简单，当我们运行npm run dev的时候，实际是在运行vite --host 0.0.0.0。

Vite

在这里插入图片描述

如何创建一个vite+vue3+ts项目（小白必看）
蜗牛~~
06-15 2694
当修改代码时，HMR 能够在不刷新页面的情况下，把页面中发生变化的模块，替换成新的模块，同时不影响其他模块的正常运作。在我们使用 node 方法（比如 path.resolve）时提供 ts 类型声明，否则编辑器会报错，虽然不影响代码运行，但是会有红线很影响心情，如下图所示。Pinia 支持热更新，所以你可以编辑你的 store，并直接在你的应用中与它们互动，而不需要重新加载页面，允许你保持当前的。（2）写好页面之后，我们来创建路由，在 src 路径下新建 router/index.ts。
Vue3 Vite3 多环境配置 - 基于 vite 创建 vue3 全家桶项目(续篇）
youyacoder的博客
10-06 4553
在项目或产品的迭代过程中，通常会有多套环境，常见的有：devsituatpreprod环境之间配置可能存在差异，如接口地址、全局参数等。在基于的项目中只需要添加.env.xxx文件，然后在的scripts启动或打包命令中指定mode参数即可，获取环境变量时使用。vite使用方式类似，但获取环境变量使用。
vite运行只能访问localhost解决办法
最新发布
weixin_41463944的博客
05-15 400
vite运行只能访问localhost解决办法
Vite启动后提示“Network: use `--host` to expose“，且无法通过网络IP访问服务
热门推荐
勇敢阿呆的部落阁
07-21 4万+
目录 起因 问题重现 问题原因 解决方法 1. 修改 vite.config.js 配置 2. 通过 Vite CLI 配置 3. 修改 npm 脚本 起因 当使用 Vite 构建项目后，需要通过局域网中的电脑或手机访问服务调试时，发现通过 IP + 端口无法访问。 问题重现 当运行 npm run dev | serve 命令时，会显示一下内容。 > vite-vue@0.0.0 serve /Users/UserName/Workspace/vue-vite > vite |
vite网络配置
qq_42238554的博客
03-20 811
如果没有进行配置，运行项目之后，看到的访问地址是本地访问地址，其他人访问不了。
【Vue3】vite 配置IP，解决“vite use `--host` to expose”
Jessieeeeeee的博客
01-17 8044
问题描述 vite 启动后出现 “ Network: use --host to expose ” vite v2.3.7 dev server running at: > Local: http://localhost:3000/ > Network: use `--host` to expose 原因分析 这是因为IP没有做配置，所以不能从IP启动，需要在 vite.config.js做相应配置； 解决方法 在 vite.config.js中添加 server.host 为 0.
vite配置
qianOye的博客
05-18 703
（2）敲入pnpm dev（pnpm run dev简写），启动项目的时候就能自动打开了。（1）打开vite.config.ts，写入open：true。配置1：自动打开网页，省去我们自己复制地址粘贴到浏览器上。
vite --host 什么意思
weixin_64684095的博客
08-07 768
用于指定服务器监听的主机地址。默认情况下，vite 开发服务器会监听本地主机（localhost）。通过使用 --host 选项，可以指定服务器监听其他的主机地址，例如所在网络中的其他 IP 地址，从而允许同一网络中的其他设备访问您正在开发的应用。这样，其他设备就可以通过你电脑在局域网中的 IP 地址来访问该项目。在 vite 中，--host 是一个命令行选项。
详解Vite创建Vue3项目+vue-router+ts+vite+element-plus
qq_44552416的博客
01-17 2504
在之前的文章中写过“Vue3+TS+ElementPlus的安装和使用教程【详细讲解】”，但那篇文章写的是创建vue3的项目没有使用到Vite构建工具进行创建还是使用的常规webpacket构建工具进行创建的。提到Vite和webpacket的时候我们可以简单说一下。Vite 和 Webpack 都是现代化的前端构建工具，它们可以帮助开发者优化前端项目的构建和性能。虽然它们的目标是相似的，但它们在设计和实现方面有许多不同之处。具体的区别和工作原理我们可以看此文章“vite和webpack的区别和作用。
vue 2.x + @vue/cli 4.x开发阶段使用Vite
m0_44963501的博客
08-14 524
vue/cli 升级 vite 动态菜单vite处理
从0搭建vite-vue3-ts项目框架：配置less+svg+pinia+vant+axios
on1yLX的博客
08-09 1200
postcss-px-to-viewport-8-plugin：postcss-px-to-viewport-8-plugin 是一款 PostCSS 插件，用于将 px 单位转化为 vw/vh 单位。创建一个types/index.d.ts，用于处理包括postcss-px-to-viewport-8-plugin一类的没有声明文件的依赖。然后就是test下随便创建一个路由，对应的，views下创建相应的vue文件，App.vue给上router-view。
vite项目启动use `--host` to expose
Xiang_Gong_Ya_的博客
09-09 1230
Vite 启动项目后，发现只有localhost + 端口 服务，没有 IP + 端口服务。运行npm run serve，终端提示Vite启动后提示Network: use ‘–host’ to expose。
vite 配置使其他人能够访问本机项目，解决“vite use `--host` to expose”
涂涂
03-08 5871
是因为IP没有做配置，所以不能从IP启动，所以通过IP无法访问。需要在vite.config.js做相应配置： 在vite.config.js中添加server.host为0.0.0.0 export default defineConfig({ plugins: [vue()], server: { //使用IP能访问 host: '0.0.0.0' } }) 保存后就可以通过网络暴露使用IP访问项目 ...
Vite 启动后提示 Network: use `--host` to expose，且无法通过IP访问服务
05-10 2083
当使用 Vite 构建项目后，需要访问服务调试时，发现通过 IP + 端口无法访问。官方文档说明不显示地址是因为 IP 没有做配置，所以不能使用 IP 访问本地的项目。
Vite启动后提示Network: use `--host` to expose
valsedefleurs的博客
01-02 1226
Vite启动后提示Network: use `--host` to expose
使用vite创建项目运行时Network提示‘use `--host` to expose’
weixin_43852569的博客
03-29 1908
使用vite创建项目运行时Network提示 “use --host to expose” 最近在使用vite创建项目，使用npm跑起来后发现，Network没有显示具体的地址，在Network那个地方会显示如下图所示的这句话： 这样的话，即使在同一个局域网内，其他人也无法访问到我这个页面，这个还是比较麻烦的； 后来我通过查阅资料发现，原来Network不显示地址是因为IP没有做配置，所以不能从IP启动，这样的话也就没有办法通过IP访问我的页面。 解决方法： 咱们看一下官网上给的配置信息： 这样一看，咱
vite启动后提示“Network: use `--host` to expose“，且无法通过网络IP访问服务
weixin_48379719的博客
11-01 953
vite启动后提示“Network: use `--host` to expose“，且无法通过网络IP访问服务
用了这么多年的Webpack和Vite，你真的了解服务器的host配置吗？
hellomoli的博客
05-24 1744
A类IP地址中：10.0.0.0–10.255.255.255 B类IP地址中：172.16.0.0–172.31.255.255 C类IP地址中：192.168.0.0–192.168.255.255 私有地址与公有地址不一样，并非由Internet分配的，是不容许出如今Internet中的，咱们在公网中是看不到私有IP地址的，而且公有地址也不会使用上述的三类地址。因此，私有地址是不能直接与Internet链接的。在服务器中，0.0.0.0并非一个真实的的IP地址，它表示本机中全部的IPV4地址。
vue3+ts+vite 运行项目后显示Network: use --host to expose
Didizisama的博客
04-23 552
方法一：vite.config.js下server的host配置。方法三：修改npm脚本，package.json中。方法二：vite cli配置。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值