本地使用Nginx部署vue项目,并且通过飞鸽内网穿透达到域名访问的效果

1. 安装Nginx
   1.1 打开Nginx官网 nginx.org下载包, 我使用的是1.23.1版本, 解压缩之后文件格式按下图
   
   1.2 使用cmd命令进去解压缩包的跟目录下
   启动Nginx服务: start nginx
   关闭Nginx服务: nginx -s quit
   1.3 启动服务之后在浏览器上输入 localhost:80出现下图说明Nginx服务启动成功
   

2. 将自己的vue项目打包并且部署到本地的Nginx服务中
   2.1 指定打包输入的文件名, 为了在Nginx部署web项目时访问对应的文件夹
   
   2.2 将打包生成的bdap-supervise-web文件夹整个复制到Nginx服务的html文件夹下
   2.3 配置Nginx, 进入conf文件夹，打开nginx.conf文件进行编辑，里面的配置很多，我对其中一些重要的配置进行了说明（前面有“#”的表示并没有真正写入配置，若要加入，只需去掉“#”）：
   修改这两处
   
   2.4 使用上面的命令启动Nginx服务, 浏览器输入localhost:8080 即可在本地部署并访问vue项目

3. 使用飞鸽内网穿透
   3.1 进入飞鸽内网穿透官网，进行注册
   3.2 注册好后，我们点击“开通隧道”选项，选择“免费节点”，有实力的也可以选贵的
   
   然后填写信息，其中前置域名可以自定，本地ip端口一定要设置成：你的内网ip:刚配置的端口号。

最后点击确认开通，就OK了，这样你就得到了免费域名+免费公网ip。

3.3 启动服务
根据电脑系统下载客户端。下载完后解压，一共有两个文件：傻瓜式运行点击我.vbs和npc.exe。点击傻瓜式运行点击我.vbs，打开后会看见一个弹窗，让你填写指令。我们切回飞鸽官网，点击“隧道管理”，如下图：根据电脑系统选择指令，点击复制，然后切回刚才的弹窗，将指令输入进去，点击确定。
在这里插入图片描述

点击确定之后会出现

这样内网穿透就成功了！打开浏览器，输入刚才开通的隧道的访问地址（上图被抹掉的地方），回车，同样能开到之前编写的网页，就成功了