Vue3项目解决运行时无NetWork地址的问题

Vue3项目解决运行时无NetWork地址的问题

前言

Vue3项目使用新的vite工具构建后进行运行,发现控制台内只有LocalHost本地地址并且提示

Network: use --host to expose

在这里插入图片描述

  • Local地址:

指的是你的项目在本地开发环境中运行时的地址。例如localhost127.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地址的问题已解决