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访问内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:
相关文章
这篇文章主要介绍了在vite项目中使用@进行文件的引入方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
下面小编就为大家分享一篇vue页面离开后执行函数的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要介绍了vue 做移动端微信公众号采坑经验记录,文中是小编记录的三个坑及解决方案，需要的朋友可以参考下2018-04-04
这篇文章主要为大家介绍了如何简单实现vue验证码60秒倒计时功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-10-10
这篇文章主要介绍了解决vant框架做H5时踩过的坑(下拉刷新、上拉加载等)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要介绍了vue中rem的配置的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
这篇文章主要介绍了详解如何用模块化的方式写vuejs，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-12
这篇文章主要给大家介绍了关于VSCode中写Vue没有代码提示的解决步骤,代码提示功能能够大大的提高开发效率,文中通过图文介绍的非常详细,需要的朋友可以参考下2023-09-09
MD5是一种信息摘要算法(对称加密),一种被广泛使用的密码散列函数,可以产生出一个128位(16字节)的散列值,用来确保信息传输完整一致性,这篇文章主要给大家介绍了关于Vue3使用MD5加密的相关资料,需要的朋友可以参考下2023-05-05
在Vue中通过Mustache模板引擎将data中的文本数据插入到HTML中,下面这篇文章主要给大家介绍了关于Vue中Mustache模板引擎插值语法的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-12-12
最新评论