使用花生壳实现Vite+Vue本地开发环境外网访问

背景

本地在开发Vite+Vue项目时，需要让团队成员实时访问验证开发的功能。通过花生壳进行内网穿透，将本地运行的项目暴露至公网，让其他成员通过公网地址访问。
很实用的一个开发调试技巧。
不仅仅是前端，后端也可以，例如微信支付开发回调地址，微信公众号授权回调设置为本机等。

下载花生壳

• 进入花生壳官网 下载花生壳

• 进入花生壳控制台

• 添加映射

• 配置本地的ip和端口，一般vite的项目端口都是5173

• 可以看到已经创建好了，复制外网地址即可访问。因为是免费的，所以带宽只有1MB，不过也够用了。

• 会出现无法访问的情况，原因是vite服务限制了文件的访问源只能是本机

• vite.config.ts 文件的server增加allowedHosts:true属性，允许任何源访问。