Vue3通过npm或者yarn启动后，显示“Network: use --host to expose”，无法访问

最新推荐文章于 2024-11-21 15:31:37 发布

红尘逸事、浊酒一杯

最新推荐文章于 2024-11-21 15:31:37 发布

阅读量1.1w

点赞数 9

CC 4.0 BY-SA版权

文章标签： 1024程序员节 vue yarn npm

本文链接：https://blog.youkuaiyun.com/zcfllcp/article/details/127485203

在使用Vue3、vite3和TypeScript构建项目时，遇到启动后显示'Network:use--hosttoexpose'，导致页面无法访问。问题源于服务未暴露IP。解决方法包括在package.json的启动脚本中添加--host参数，或在vite.config.ts文件中设置server.host为'0.0.0.0'，这样将本地IP和端口暴露，使得项目可以正常访问。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题描述

使用Vue3+vite3+TS构建项目后，使用yarn serve或者 npm run dev命令启动项目后，显示“Network: use --host to expose”，页面无法访问，yarn启动和npm启动显示如下所示：

yarn run v1.22.19
$ vite preview
➜ Local: http://127.0.0.1:4173/
➜ Network: use --host to expose

> vue-manage-system@5.3.0 dev
> vite

VITE v3.0.9 ready in 538 ms

➜ Local: http://127.0.0.1:5173/
➜ Network: use --host to expose

产生原因：“Network: use --host to expose”提示使用host来进行暴露，即要将服务暴露成IP+端口号进行访问。

解决办法：

1、将package.json中的启动项中的dev和serve增加--host参数。

原代码：

	"scripts": {
		"dev": "vite ",
		"build": "vue-tsc --noEmit && vite build",
		"serve": "vite preview "
	},

修改后代码：

	"scripts": {
		"dev": "vite --host",
		"build": "vue-tsc --noEmit && vite build",
		"serve": "vite preview --host"
	},

2、在vite.config.ts文件中增加server选项配置，server中配置host内容

原代码：

export default defineConfig({
	base: './',
	plugins: [
		vue(),
		VueSetupExtend(),
	],

});

export default defineConfig({
	base: './',
	plugins: [
		vue(),
		VueSetupExtend(),
	
	],
	server:{                 //此处为新增代码
		host:'0.0.0.0',      //此处为新增代码
	}                        //此处为新增代码
});

解决结果：

再次启动后，会将本机的IP和端口号暴露出来，点击可访问，如下图（由于我电脑有多个IP，故而Network中会将所有IP暴露出来）：

VITE v3.0.9 ready in 591 ms

➜ Local: http://localhost:5173/
➜ Network: http://192.168.238.1:5173/
➜ Network: http://192.168.74.1:5173/
➜ Network: http://192.168.61.53:5173/