Vite内网ip访问2种配置方式
更新时间：2023年07月27日 09:46:26 作者：前端蜗牛君
这篇文章主要给大家介绍了关于Vite内网ip访问的2种配置方式,文中通过实例代码介绍的非常详细,对大家学习或者使用Vite具有一定的参考学习价值,需要的朋友可以参考下
问题
使用vite运行项目的时候，控制台会只出现127.0.0.1（localhost）本地地址访问项目。不可以通过公司内网ip访问，其他团队成员无法访问，这是因为没有将服务暴露在局域网中:
两种解决方式
方式一：修改vite的配置文件（vite.config.ts）添加 host: "0.0.0.0"
export default defineConfig({
plugins: [vue(), vueJsx()],
resolve: {
alias: {
"@": fileURLToPath(new URL("./src", import.meta.url))
},
},
server: {
port: 9999,
host: "0.0.0.0"
},
});方式二：修改package.json文件
"scripts": {
"dev": "vite --host 0.0.0.0",
"build": "vite build",
"preview": "vite preview"
},结果
采用上面任一方式，就可以通过内网地址访问了：
补充知识：vite中使用局域网访问项目
在运行vite项目后，发现只能本地访问，不能局域网访问，package.json如下
只需在package.json中加上以下内容即可：
--host 0.0.0.0
重启vite即可
总结
到此这篇关于Vite内网ip访问2种配置方式的文章就介绍到这了,更多相关Vite内网ip访问内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:
相关文章
毫无疑问,组件通讯是Vue中非常重要的技术之一,它的出现能够使我们非常方便的在不同组件之间进行数据的传递,以达到数据交互的效果,所以,学习组件通讯技术是非常有必要的,本文将一次解决Vue3中组件通讯的全部方式,总有你想要的那一种,需要的朋友可以参考下2024-09-09
这篇文章主要介绍了如何在 Vue 表单中处理图片，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下2021-01-01
这篇文章主要介绍了基于Vue-cli的一套代码支持多个项目的方案，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下2021-03-03
vue中echarts的用法及与elementui-select的协同绑定操作
这篇文章主要介绍了vue中echarts的用法及与elementui-select的协同绑定操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
本文通过实例代码给大家介绍了vue中的无限循环，代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友参考下吧2017-09-09
这篇文章主要介绍了Vue快速实现通用表单验证功能，本文通过一个小例子给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-12-12
vue深拷贝的三种实现方式：1、通过递归方式实现深拷贝；2、JSON.parse(JSON.stringify(obj))；3、jQuery的extend方法实现深拷贝,本文通过实例代码给大家介绍的非常详细,需要的朋友参考下吧2023-11-11
这篇文章主要介绍了vue之Element-Ui输入框显示与隐藏方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
这篇文章主要介绍了vue中getters的使用与四个map方法的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-01-01
这篇文章主要介绍了vue移动端模态框(可传参)的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
最新评论