vite(vue3)配置内网ip访问的方法步骤
更新时间：2023年05月31日 11:05:55 作者：零OO
Vite是一个快速的构建工具,Vue3是一个流行的JavaScript框架,下面这篇文章主要给大家介绍了关于vite(vue3)配置内网ip访问的方法步骤,文中通过图文介绍的非常详细,需要的朋友可以参考下
本项目框架(vue3)： Vite + TS
如果没有进行配置，运行项目之后，看到的访问地址是本地访问地址，其他人访问不了。
如下：
如果想要其他人也可以访问，需要设置内网 ip 访问地址，设置方法如下：
一、配置 “ vite.config.ts ” 文件
在项目根目录下的 “ vite.config.ts ” 文件 中，添加 serve 配置 “host: ‘0.0.0.0’ ”，即添加以下代码：
server: {
host: '0.0.0.0'
},如图所示：
添加 server 配置后保存 “ vite.config.ts ” 文件 ，并重新运行项目- - - npm run dev
可以看到 本地localhost访问地址 + 内网访问地址，这两种方式的访问地址，如下：
这样，通过 下面 “ Network ” 内网地址，其他也可以访问该网页了
二、配置 “ package.json ” 文件
在 “ package.json ” 文件中，修改 “ dev ” 配置，添加 “ --host 0.0.0.0”，如下：
没有修改时，" dev " 项配置如下：
"scripts": {
"dev": "vite",
}修改后:
"scripts": {
"dev": "vite --host 0.0.0.0",
}如图所示：
保存后，重新运行项目，如上方法一 一样，会出现本地和内网两种形式访问地址。
设置内网ip访问后其他人无法访问：可能是防火墙没关闭
找到网络 --》鼠标右键，选中“属性” --》“ Windows Defender 防火墙” --》 “ 启用或关闭 Windows Defender 防火墙” --》 选中 “关闭 Windows Defender防火墙” --》 “确定”，保存设置
然后重新访问 内网 ip 地址，应该就可以访问了。
如图所示：
总结
到此这篇关于vite(vue3)配置内网ip访问的方法步骤的文章就介绍到这了,更多相关vite配置内网ip访问内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vant组件中 dialog的确认按钮的回调事件操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
vue作为前端主流的3大框架之一,目前在国内有着非常广泛的应用,下面这篇文章主要给大家介绍了关于Vue实战之项目开发时常见的几个错误汇总的相关资料,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友可以参考下2023-03-03
这篇文章主要介绍了在Vue中创建可重用的 Transition,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-06-06
这篇文章主要为大家详细介绍了vue原生方法自定义右键菜单，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要介绍了vue3 携带参数跳转|router传参方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
这篇文章主要介绍了Vue 简单实现前端权限控制的示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-12-12
这篇文章主要介绍了vue3.0如何在全局挂载对象和方法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了vue中可以绑定多个事件吗，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要介绍了详解Vue CLI 3.0脚手架如何mock数据，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
这篇文章主要为大家详细介绍了vue仿ios列表左划删除，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-09-09
最新评论