在当今的前端开发领域，Vue.js凭借其高效、简洁的特性，迅速成为广大开发者的首选框架。今天，我们就来聊聊如何创建一个Vue项目，并通过 frpee 实现外网访问本地Vue项目的全过程。这不仅能提升你的开发效率，还能让你的项目更易于展示和测试，轻松分享你的Vue项目给同事、客户或朋友，提升沟通和协作效率。
一、Vue项目快速搭建
通过FRPEE内网穿透，你可以轻松实现Vue项目的外网访问，享受高效、便捷的开发体验。无论你是个人开发者还是团队一员，这一技能都将为你的开发工作带来极大的便利。快来试试吧！
1，安装Node.js
访问nodejs官网 https://nodejs.org/zh-cn ，直接下载，然后双击运行安装
这里要说明一下，nodejs会自动安装npm包管理工具，后面我们会用到npm
2，创建vue项目
直接访问vue官网 https://cn.vuejs.org/，点击安装，下来如图跟着文档操作
在文档中可以看到vue项目不同包管理器下的的安装命令，我们选择npm方式的
复制 npm create vue@latest 去 cmd窗口中运行，下图是执行效果
进入文件夹，npm install 安装所有依赖
下来启动vue项目，npm run dev, 就可以在命令行看到开发服务地址
浏览器访问 http://localhost:5173/ 就可以看到vue项目页面了
这样快速的就搭建好了一个vue3的项目，下来就可以进行页面需求开发了
3，Frpee内网穿透Vue
frpee是一个免费的内网穿透工具，可以让开发人员轻松穿透内网服务，包括后端服务，数据库服务，各种应用接口，这里介绍穿透本地vue项目
首先下载 frpee客户端 http://frpee.com/docs，查看frpee官方文档
运行客户端后，填写Vue项目的本地ip地址和端口即可
启动服务，就可以通过公网访问本地的vue项目了
浏览器访问客户端中配置的远程 域名地址，就可以看到本地vue页面了
4，关于外网域名问题
域名是在frpee控制台免费申请的，这里申请后，客户端里就可以用了（如果你自己有域名，也可以绑定自己的域名使用）
5，访问 Invalid Host header 问题
最近穿透vue项目，坑了不少同学，询问遇到这种情况如何解决，是我写文章时候的疏忽，现追加解决方案！！
上面演示创建的是vue3项目，如果你穿透的是vue2项目访问可能会出现Invalid Host header提示
在vue-cli版本为2.x的情况下修改vue.config.js中的devServer对象加入disableHostCheck: true
项目创建的时候是没有vue.config.js文件的，需要自己手动创建一个
修改完未生效，必须要重启！必须要重启！必须要重启！ 具体我找了下面文章自行参考：
解决 Vue 项目 invalid host header 问题（两种方案） - 无聊猿 - 博客园
vue内网穿透问题：Invalid Host header_vue3内网穿透报错-CSDN博客
module.exports = {
devServer: {
disableHostCheck: true,
},
...
}
优势与吸引力
高效开发：无需将项目部署到远程服务器，即可在外网环境下进行实时调试和测试。
灵活展示：轻松分享你的Vue项目给同事、客户或朋友，提升沟通和协作效率。
