Vue3项目解决运行时无NetWork地址的问题
前言
Vue3项目使用新的vite工具构建后进行运行,发现控制台内只有LocalHost本地地址并且提示
Network: use --host to expose
- Local地址:
指的是你的项目在本地开发环境中运行时的地址。例如localhost
或127.0.0.1
,当你在本地开发环境中运行项目时,你可以使用local地址来预览和调试你的项目。但是此地址仅供你自己访问,其他人通过localhost 是访问不到你跑的项目的。
- network地址:
指的是你的项目在真实的网络环境中运行时的地址。它是你的真实IP地址或者域名,用于访问你的项目。当你将项目部署到服务器上时,你需要使用network地址来访问项目。在局域网内,其他设备可以通过局域网内的IP地址来访问网络地址。
所以下面有两种方式可以对vue3项目进行network地址的配置
方式一:修改package.json文件
"scripts":{
"dev":"vite --host 0.0.0.0",
},
在script后面补上 --host 或者 --host 0.0.0.0
在服务器上绑定所有可用的网络接口,以便可以从任何IP地址访问服务器。
如果有指定的ip地址可以修改为指定地址
方式二:修改vite.config.ts(或vite.config.js)
server:{
host:`0.0.0.0`,
},
如果有指定的ip地址可以修改为指定地址
两种方式可以任选一种,配置完成后,现在再看控制台,已经出现了Network地址
至此,Vue3项目运行时无NetWork地址的问题已解决