在当今的前端开发领域，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,
	},
	...
}

1. 优势与吸引力
   
   高效开发：无需将项目部署到远程服务器，即可在外网环境下进行实时调试和测试。
   灵活展示：轻松分享你的Vue项目给同事、客户或朋友，提升沟通和协作效率。