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

问题描述

使用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/