nginx代理的vue项目--natapp内网穿透真机调试

哇咔咔，来搞事情，写一个vue移动端项目，要在真机上调试运行。

vue项目在本地用nginx代理

项目用不用nginx代理和自家后端商量(代不代理无碍穿透)
自己在nginx官网上下载对应版本，进行配置

server {
    listen 9002;                 // 随便写一个没被占用的端口号
    server_name localhost;      // 后端配

	location ~ ^/(login|cust|common)/.*$ {      // 接口前缀 要后端去配
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_pass  http://xx.xxxxxx.com;     // 线上生产地址

    }
	
 location /{
   #rewrite / /static/index.html permanent;
    proxy_pass  http://192.168.1.115:8081;     // 本地项目启动地址
   }
   
 location /static/{
   index index.html;
   alias D:/项目文件夹/微信静态库/wx-project-name/;    // 本地项目源文件夹所在路径
 }   
}

配好了，启动本地项目，在浏览器中访问：localhost:9002
如果配置成功了，那页面就出现了，并且后端请求接口也都能调通，至此，你才能进行下一步内网穿透。

natapp内网穿透

1， 在natapp官网注册一个账号，进行一系列认证操作，然后下载一个对应的版本到本地

,2， 然后在‘购买隧道’选择一个‘免费隧道’（当然你有钱就开一个要钱的，毕竟免费的它总是时不时发神经）

3，在免费隧道配置，依照自己需求，我主要配置域名（写要穿透的本地域名，我这里nginx上配置的是localhost，所以是127.0.0.1，别问我为什么不直接写localhost，写了它也验证通过，可页面就是提示无法连接该端口没提供web服务之类云云，于是开始天昏地暗的检查啊，都没有问题，然后就好死不死的试了一下127.0.0.1，通了，说多了就是泪，如果你的项目没用nginx代理，那这里就写你的项目启动ip）和端口(和域名规则一样)

4，配完了保存，然后打开你刚刚下载的natapp.exe，启动它：natapp -authtoken=‘你的authtoken’，


5，启动了之后，它会生成一个地址

然后把这个地址在你的手机上(可以先在浏览器上打开试一下)打开，然后修改你的项目，在手机上刷新就能调试啦！打开有些慢，毕竟。。。这是免费的，有钱可以不用忍。

之前这个问题困扰良久，看了别人的博客也一知半解，写了一个项目，就把它完整的记录一下

做人，最重要的是开心嘛，der