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访问内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了关于vue中的时间格式转化问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
这篇文章主要介绍了通过实例解析vuejs如何实现调试代码,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-07-07
这篇文章主要介绍了VUE实现自身整体组件销毁的示例代码,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-01-01
vite官方文档中有关于多页面应用模式如果配置的说明,下面这篇文章主要给大家介绍了关于vite多页面配置的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-04-04
reactive用来包装一个对象，使其每个对象属性都具有响应性（也就是深层次响应式），这篇文章主要介绍了vue3.2 reactive函数注意点及问题小结,需要的朋友可以参考下2022-12-12
这篇文章主要介绍了Vue实现录制屏幕功能并本地保存,这里用的是用的是HBuilder X开发，结合示例代码给大家介绍的非常详细，需要的朋友可以参考下2022-04-04
这篇文章主要介绍了vue-cli3中配置alias和打包加hash值操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
这篇文章主要介绍了vue3.0使用axios报错问题记录,vue-cli3.0安装插件的时候要注意区分vue-cli2.0的命令，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-08-08
这篇文章主要介绍了vue如何实现Toast轻提示，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
vuex中store存储store.commit和store.dispatch的用法
这篇文章主要介绍了vuex中store存储store.commit和store.dispatch的用法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
最新评论